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;

相关推荐
勤奋的知更鸟几秒前
JavaScript 性能优化实战:深入性能瓶颈,精炼优化技巧与最佳实践
开发语言·javascript·性能优化
耶啵奶膘5 分钟前
css——width: fit-content 宽度、自适应
前端·css
OEC小胖胖6 分钟前
前端框架状态管理对比:Redux、MobX、Vuex 等的优劣与选择
前端·前端框架·web
字节架构前端1 小时前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构
奕羽晨1 小时前
关于CSS的一些读书笔记
前端·css
Poetry2371 小时前
大屏数据可视化适配方案
前端
好学且牛逼的马1 小时前
vue3笔记
vue.js
遂心_1 小时前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js
轻语呢喃1 小时前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html