- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Veröffentlichen Sie zuerst den Code und fügen Sie ihn dann direkt ein, um den Effekt zu sehen
<!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>Ich möchte überwachen, ob sich die Zahl in der Liste geändert hat oder größer als die aktuelle Zahl ist.
Wenn sich die Zahl ändert, wird die Spanne unter h2 angezeigt. Dann verschwindet es in 1 Sekunde.
Aber ich wusste nicht, wie es geht. (Hinweis: Welche Spanne angezeigt wird, wenn sich die Zahl ändert. Nicht alle werden angezeigt.)
高洛峰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/ 体验
