javascript - vue 如何判断v-for里的某个值发送变化
本文介绍了javascript - vue 如何判断v-for里的某个值发送变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
先贴代码，直接粘贴过去就能看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
width: 300px;
height: 400px;
position: absolute;
top: 50px;
left: 100px;
border: 1px solid #ccc;
}
.bg ul li {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div>
<div class="bg">
<ul>
<li v-for="item of list" :key="item.id">
<h2>{{ item.name }}</h2>
<span v-show="false">我出现了</span>
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '.bg',
data () {
return {
list: [
{
id: 0,
name: '李四',
number: 0
},
{
id: 1,
name: '张三',
number: 0
},
{
id: 2,
name: '王五',
number: 0
},
]
}
}
})
</script>
</div>
</body>
</html>我想监听list 下面的number 是否发生变化，或者大于现在的number。
如果number发生变化了， h2下面的span 就会出现。 然后 1秒消失。
但是没想到怎么去做。 (注意： 哪个number变化就哪个span出现。 不是所有都出现。)
解决方案
不错，应该使用 watch
应该分拆使用组建，我想原汁原味的Vue写法应该如此：
Vue.component('list-view', {
props: ['item'],
data() {
return {
is_show: false
}
},
watch: {
'item.number': function(newN, oldN) {
this.is_show = newN > oldN;
},
is_show: function(newStatus) {
if (newStatus) {
setTimeout(() => this.is_show = false, 1000);
}
}
},
template: `
<li>
<h2 v-text="item.name"></h2>
<span v-show="is_show">我出现了</span>
</li>`
});
const app = new Vue({
el: '.bg',
data() {
return {
list: [{
id: 0,
name: '李四',
number: 0
}, {
id: 1,
name: '张三',
number: 0
}, {
id: 2,
name: '王五',
number: 0
}, ]
}
},
mounted() {
//测试用的
setTimeout(() => {
this.$set(this.list[0], 'number', 1);
}, 1000);
setTimeout(() => {
this.$set(this.list[1], 'number', 1);
}, 2000);
setTimeout(() => {
this.$set(this.list[2], 'number', 1);
}, 3000);
}
});
<div>
<div class="bg">
<ul>
<list-view v-for="item in list" :item="item" :key="item.id">
</list-view>
</ul>
</div>
</div>可以到 https://jsfiddle.net/1rb586dr/2/ 体验
这篇关于javascript - vue 如何判断v-for里的某个值发送变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
