何为数组的响应式通过方法把数组中的元素改变了,页面上的视图也会更新。响应式的方法div id=appdiv v-for=item in letters{{item}}/divbutton @click=btnClick按钮/button/divscript src=.....
何为数组的响应式
通过方法把数组中的元素改变了,页面上的视图也会更新。
响应式的方法
div id="app">
<div v-for="item in letters">{{item}}</div>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['1','2','3','4']
},
methods: {
btnClick() {
// 1.push方法:在数组最后面添加元素
// this.letters.push('aaa')
// 2.pop方法:删除数组中最后一个元素
// 3.shift方法:删除数组中第一个元素
// 4.unshift方法:在数组最前面添加元素
// 5.splice方法:删除元素、插入元素、替换元素
// 6.sort方法:排序
// 7.reverse方法:反转
}
}
})
</script>
总结:一共七个数组方法支持在vue中响应式
非响应式方法
data() {
nums: [1,2,3,4]
}
methods: {
changeNum() {
this.nums[2]= 99
}
}
此类获取数组索引进行一个操作不是响应式的。
怎么解决:
1、通过splice方法
this.nums.splice(1,1,'99')
2、也可以通过vue的set方法进行修改。
set(要修改的对象,索引值,修改后的值)
Vue.set(this.nums,1,'99')
遇到数组对象可如何是好
修改对象的属性值是响应式的
data() {
nums: [{name: "fanfusuzi",sex:"man"},{name:"zhangsan",sex: "man"}]
}
methods: {
changeName() {
this.nums[0].name ="zkf"
}
}
通过下标替换一个对象元素,不是响应式的
data() {
nums: [{name: "fanfusuzi",sex:"man"},{name:"zhangsan",sex: "man"}]
}
methods: {
changeName() {
this.nums[0] = {name: "zkf",sex:"man"}
}
}
沃梦达教程
本文标题为:vue中哪些数组方法不是响应式的
基础教程推荐
猜你喜欢
- this[] 指的是什么内容 讨论 2023-11-30
- 基于Vue制作组织架构树组件 2024-04-08
- JS前端广告拦截实现原理解析 2024-04-22
- Ajax实现动态加载数据 2023-02-01
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- js禁止页面刷新与后退的方法 2024-01-08
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- 浅谈Vue2和Vue3的数据响应 2023-10-08
- CSS3的几个标签速记(推荐) 2024-04-07
