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;

相关推荐
吉吉安几秒前
两张图片对比clip功能
javascript·css·css3
掘金酱7 分钟前
2025年6月【创作者训练营】开奖公示 🎇
前端
布兰妮甜11 分钟前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
久爱@勿忘13 分钟前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021114 分钟前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依18 分钟前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
Monkey的自我迭代29 分钟前
Python标准库:时间与随机数全解析
前端·python·数据挖掘
行云&流水30 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
知了清语1 小时前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依