当我单击单击单击按钮和标签时,如何在VUEJS 2中显示相应的值
我有这样的数据,我想对其进行过滤以按值的值显示。 我的数据
data(){
return{
checks:['Developer','Tester', 'Designer', 'Support',],
infojobs:[{
genres: 'Developer',
position:'Senior Java Engineer, Big Data',
exprerience:'3-5 Years',
salary:'',
headequarters:'',
content1:'A',
content2:'B',
content3:'C'}]
我需要通过工作流派过滤,这是我的界面:
jobs.vue
<div class="job-filter">
<h3>Filter</h3>
<div class="radio-group" id="group-filter" :class="{ 'display-block': this.display }">
<div class="radio-check pdt-10 ">
<input type="radio" name="fav_language" value="">
<label for="">Tất cả</label><br>
</div>
<div class="radio-check" v-for="(check, index) in checks" :key="index">
<input type="radio" name="fav_language" value="" >
<label for="">{{check}}</label><br>
</div>
</div>
</div>
<div class="search">
<div class="search-top flex-wrap">
<h5>22 tin tuyển dụng</h5>
<div class="search-input">
<input type="search" placeholder="Nhập từ khóa để tìm kiếm">
<button><img src="../assets/recruit/search.svg" alt=""></button>
</div>
</div>
<div class="job-item" v-for="(item, index) in infojobs" :key="index">
<h3 class="mleft-27">{{item.position}}</h3>
<div class="job-info flex-wrap">
<div class="job-info-left pleft-27 flex-wrap">
<div>
<img src="../assets/recruit/years.svg" alt="">
<b>{{item.exprerience}}</b>
</div>
<div>
<img src="../assets/recruit/luong.svg" alt="">
<b>{{item.salary}}</b>
</div>
<div>
<img src="../assets/recruit/diadiem.svg" alt="">
<b>{{item.headequarters}}</b>
</div>
</div>
<div>
<h6>2 ngày trước</h6>
</div>
</div>
<div class="info-job flex-wrap">
<div class="list-info-job">
<ul>
<li>{{item.content1}}</li>
<li>{{item.content2}}</li>
<li>{{item.content3}}</li>
</ul>
</div>
<a href="/detail">
<button class="btn-detail" >Xem chi tiết</button>
</a>
</div>
I have a piece of data like this and I want to filter it to display by value of radio button.
My Data
data(){
return{
checks:['Developer','Tester', 'Designer', 'Support',],
infojobs:[{
genres: 'Developer',
position:'Senior Java Engineer, Big Data',
exprerience:'3-5 Years',
salary:'',
headequarters:'',
content1:'A',
content2:'B',
content3:'C'}]
I need to filter it by job genres and this is my interface:
jobs.vue
<div class="job-filter">
<h3>Filter</h3>
<div class="radio-group" id="group-filter" :class="{ 'display-block': this.display }">
<div class="radio-check pdt-10 ">
<input type="radio" name="fav_language" value="">
<label for="">Tất cả</label><br>
</div>
<div class="radio-check" v-for="(check, index) in checks" :key="index">
<input type="radio" name="fav_language" value="" >
<label for="">{{check}}</label><br>
</div>
</div>
</div>
<div class="search">
<div class="search-top flex-wrap">
<h5>22 tin tuyển dụng</h5>
<div class="search-input">
<input type="search" placeholder="Nhập từ khóa để tìm kiếm">
<button><img src="../assets/recruit/search.svg" alt=""></button>
</div>
</div>
<div class="job-item" v-for="(item, index) in infojobs" :key="index">
<h3 class="mleft-27">{{item.position}}</h3>
<div class="job-info flex-wrap">
<div class="job-info-left pleft-27 flex-wrap">
<div>
<img src="../assets/recruit/years.svg" alt="">
<b>{{item.exprerience}}</b>
</div>
<div>
<img src="../assets/recruit/luong.svg" alt="">
<b>{{item.salary}}</b>
</div>
<div>
<img src="../assets/recruit/diadiem.svg" alt="">
<b>{{item.headequarters}}</b>
</div>
</div>
<div>
<h6>2 ngày trước</h6>
</div>
</div>
<div class="info-job flex-wrap">
<div class="list-info-job">
<ul>
<li>{{item.content1}}</li>
<li>{{item.content2}}</li>
<li>{{item.content3}}</li>
</ul>
</div>
<a href="/detail">
<button class="btn-detail" >Xem chi tiết</button>
</a>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以在无线电输入上设置
V-Model
,并使用计算的属性过滤数据:You can set
v-model
on your radio inputs and use computed property to filter data: