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;

相关推荐
吃饺子不吃馅1 小时前
Canvas 如何渲染富文本、图片、SVG 及其 Path 路径?
前端·svg·canvas
王六岁2 小时前
🐍 前端开发 0 基础学 Python 入门指南:f-strings 篇
前端·javascript·python
一道雷2 小时前
🚀 Vue Router 插件系统:让路由扩展变得简单优雅
前端·javascript·vue.js
辣辣y2 小时前
Tailwind CSS 使用指南
前端·css
wgb04092 小时前
vxe table 升级之后页面数据不显示解决方法
java·前端·javascript
集成显卡2 小时前
Bun.js + Elysia 框架实现基于 SQLITE3 的简单 CURD 后端服务
开发语言·javascript·sqlite·bun.js
不如摸鱼去2 小时前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
im_AMBER2 小时前
JavaScript 03 【基础语法学习】
javascript·笔记·学习
IT_陈寒3 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端