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更新?

  1. 利用 $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

    

v-for列表渲染之数组变动检测的更多相关文章

  1. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

  2. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  3. 第六十三篇:Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  4. ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)

    1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...

  5. 一起学Vue之列表渲染

    在Vue开发中,列表数据绑定非常简单易用,本文主要通过一些简单的小例子,讲述v-for的使用方法,仅供学习分享使用,如有不足之处,还请指正. 用 v-for 把一个数组对应为一组元素 我们可以用 v- ...

  6. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  7. 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  8. vue学习笔记(二)- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  9. 前端框架之Vue(6)-列表渲染

    用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...

随机推荐

  1. JavaScript关于返回数据类型一个小小的笔记

    Javascript关于返回数据类型的一个小笔记 javascript数据类型有两种. 一种是基本数据类型:String.Number.Boolean.Symbol.Underfine.Null 一种 ...

  2. C语言运算符(位运算符)+(赋值运算符)

    实列 1 #include <stdio.h> 2 3 int main() 4 { 5 6 unsigned int a = 60; /* 60 = 0011 1100 */ 7 uns ...

  3. WPS函数

    vlookup函数:=VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 官方解释:其逻辑为在某一区间内搜索区间外某一单元格的值, ...

  4. 第一个Java文件

    HelloWorld 1.新建一个文件夹,用来存放java文件的 2.用subline来编辑第一个Java文件 要注意的是java的文件名为.java 我们自定义的文件名是Hello 3.编写第一个j ...

  5. VNC远程重装CentOS7

    适用于云服务器,远程安装纯净版的CentOS7.9 脚本执行完成后使用VNC客户端连接 一键重装脚本 #!/bin/bash #Net Reinstall Centos System red='\03 ...

  6. excel的导入与导出---通用版

    excel的导入与导出---通用版 web项目关于导入导出的业务场景很常见,最近我就又遇到了这个业务场景.这次将最近半个月做的导入导出总结一下 使用的pom如下,主要还是阿里巴巴的easyexcel依 ...

  7. JAVA集合体系之-开篇

    JAVA的集合体系是个庞大的知识体系,里面涵盖了,如数组结构,链表,红黑树,排序算法,线程安全等等知识点,接下来将会使用一系列的分享文章整理自己的学习心得,留的温故而知新.下图是整理出来的JAVA集合 ...

  8. Build VM Cluster on CentOS Host

    Host Machine [root@bocoty49 ~]# lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0 ...

  9. mysqldump备份恢复数据

    //导出数据(多个表以空格间隔)mysqldump -h 127.0.0.1 -uroot -p123456 --default-character-set=utf8 pandora report & ...

  10. ECDSA—模加减模块

    如果a,b GF(P),则加法运算a+b=r (mod p),其中r满足0<r<p-1,即a+b除以p的余数,该操作成为模p加法.对于模减运算可以视为另类的模加运算,即a+(-b)=k ( ...