Vue框架中监测数组变化的方法

一 变更方法

调用 push()方法 会直接影响ui变化

html 复制代码
<template>
<div>
    <ul>
        <li v-for="(item,index) in nums " :key="index"></li>
    </ul>
</div>
<button @click="add">添加数据</button>
</template>

<script>
export default{
    data(){
        return{
            nums:["java" ,"c" ,"vue"]
        }
    },
    methods:{
        add(){
            this.nums.push("js");
        }
    }
}
</script>

二 替换一个数组 不会直接影响ui变化

html 复制代码
<template>
<div>
    <ul>
        <li v-for="(item,index) in nums " :key="index"></li>
    </ul>
</div>
<button @click="add">添加数据</button>
</template>

<script>
export default{
    data(){
        return{
            nums:["java" ,"c" ,"vue"]
        }
    },
    methods:{
        add(){
           this.nums =  this.nums.concat(["js"])
        }
    }
}
</script>

如果只是this.nums.concat(["js"])ui见不会发生变化 需要重新赋值给nums 才会在浏览器中显示出新添加的数组元素 js;

相关推荐
当牛作馬6 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw019 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖22 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
武昌库里写JAVA22 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
小飞悟1 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python