javascript - vue 如何判断v-for里的某个值发送变化
问题描述
先贴代码，直接粘贴过去就能看效果
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <script src='https://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出现。 不是所有都出现。)
问题解答
回答1：不错，应该使用 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/ 体验
回答2：你可以使用watch()属性
api文档：vue-vatch
希望可以帮到你，如果还不懂再@我
相关文章：
1. 移动端页面文字垂直居中兼容性问题2. angular.js - angular js配置路由 编写控制器的时候说跳转页内的数据模型不存在3. android - 新建项目卡在Gradle:Resolvedependencies’:app:_debugCompile’4. javascript - 求一套有关于IP地址的JS正则！5. angular.js - 有没有不需要先git clone xxxx的angular2的教程？6. atom编译器 如何格式化前端代码文件？7. angular.js - 获取数据后总是要有一段$scope.$apply();这段代码是什么意思呀？8. css3 - 我的css用less写的，eclipse的jsp文件要修改css很麻烦，怎么解决？9. javascript - 关于Js中 this的一道题10. mysql根据某个字段已存在的值排序
网公网安备