1.简单举一个v-for列表渲染例子
<template> <div> <ul> <li v-for="item in items">{{item}}</li> </ul> </div> </template> <script> export default { data () { return { items:['html','css','javascript'] } }, } </script>
2.修改items数组中的值
- demo : https://run.iviewui.com/9OwDCfZE
- 结果发现数组中的值虽然发生了变化,但是watch中并没有监听到数组的变化,并且DOM也没有发生改变;
1 methods:{ 2 hadnleupdata(){ 3 this.items[1]='python'; 4 console.log(this.items) 5 } 6 }, 7 watch:{ 8 items(val){ 9 console.log('watch中items值为:',val) 10 } 11 }
3. 如何解决并让DOM更新?
- 利用 $forceUpdate 强制更新
-
-
- 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,就可以使用此方法;
-
-
-
- 通过这种方式发现DOM虽然发生了改变,但是watch中的监听事件并没有触发;
-
1 methods:{ 2 hadnleupdata(){ 3 this.items[1]='python'; 4 console.log(this.items) 5 this.$forceUpdate(); 6 } 7 }, 8 watch:{ 9 items(val){ 10 console.log('watch中items值为:',val) 11 } 12 }
2. Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装常用的方法有:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort( )
通过这种方式发现 DOM 发生了改变并且 watch 监听事件也被触发了;
1 methods:{ 2 hadnleupdata(){ 3 this.items.splice(1,1,'python') 4 console.log(this.items) 5 } 6 }, 7 watch:{ 8 items(val){ 9 console.log('watch中items值为:',val) 10 } 11 }
4. 结合iview提供的Table组件使用案例:https://run.iviewui.com/oM49rQ7H