先貼程式碼，直接貼過去就能看效果
<!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>
<p>
<p class="bg">
<ul>
<li v-for="item of list" :key="item.id">
<h2>{{ item.name }}</h2>
<span v-show="false">我出现了</span>
</li>
</ul>
</p>
<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>
</p>
</body>
</html>我想監聽list 下面的number 是否有變化，或是大於現在的number。
如果number改變了， h2下面的span 就會出現。然後 1秒消失。
但是沒想到怎麼做。 (注意： 哪一個number變化就出現哪個span。不是所有都出現。)
高洛峰2017-06-30 10:00:49
不錯，應該使用 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);
}
});<p>
<p class="bg">
<ul>
<list-view v-for="item in list" :item="item" :key="item.id">
</list-view>
</ul>
</p>
</p>可以到 https://jsfiddle.net/1rb586dr/2/ 體驗
