首页vue中如何监听数组selectionList

vue中如何监听数组selectionList

时间: 2024-01-21 22:19:04 浏览: 75

VUE整理（五）

### VUE整理（五）——列表渲染与动态数据更新 #### 一、列表渲染列表渲染是Vue.js中一个非常重要的特性，它允许开发者通过循环遍历数组或对象来动态生成DOM元素。这种方式极大地简化了代码，并使得界面更加灵活。 ##### 1. 迭代一个数组在Vue中，我们可以使用`v-for`指令来遍历数组中的每一项，并为每一项创建一个DOM元素。`v-for`指令需要使用`item in items`的形式，其中`items`是我们要遍历的数组，而`item`则代表数组中的每一项。 **示例代码：** ```html    <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> <script> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) </script> ``` 在这个例子中，`items`数组包含两个对象，每个对象都有一个`message`属性。通过`v-for`指令，我们可以在页面上为数组中的每一项创建一个`<li>`元素，并显示该元素的`message`值。 **扩展：**在`v-for`块中，我们还拥有对父作用域属性的完全访问权限。此外，`v-for`还支持一个可选的第二个参数，即当前项的索引。这可以通过`(item, index) in items`的形式来实现： ```html   <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> <script> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) </script> ``` 这个例子展示了如何访问父作用域中的`parentMessage`属性，并且同时获取数组中每一项的索引。 ##### 2. 迭代一个对象除了数组之外，`v-for`还可以用来遍历对象。在这种情况下，我们可以使用`value in object`的形式来遍历对象的每一个值。 **示例代码：** ```html   <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> <script> new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> ``` 在这个例子中，我们遍历了一个包含姓名和年龄的对象。与遍历数组类似，我们也可以获取对象中每一项的键名和索引： ```html <div id="app-3"> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> </div> <script> new Vue({ el: '#app-3', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> ``` #### 二、数据源更新检测为了使视图能够根据数据的变化自动更新，Vue提供了对数据的动态观察机制。这对于实现动态的页面变化非常重要。 ##### 1. 数组更新检测 Vue通过一组变异方法来检测数组的变化，并确保当这些方法被调用时会触发视图更新。这些方法包括： - `push()` - `pop()` - `shift()` - `unshift()` - `splice()` - `sort()` - `reverse()` 这些方法可以直接用于数组，Vue会自动检测到这些操作并更新视图。 **示例代码：** ```javascript example1.items.push({ message: 'Baz' }); ``` 这个简单的`push()`操作会立即使视图更新，添加一个新的列表项。 **非变异方法：**相比变异方法，还有一些非变异方法，如`filter()`, `concat()` 和 `slice()`等。这些方法不会改变原始数组，而是返回一个新数组。当使用这些非变异方法时，我们需要用新数组替换旧数组： ```javascript example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/); }); ``` 这种方法同样可以更新视图。 ##### 2. Vue无法检测的数组变动尽管Vue提供了强大的数组变动检测机制，但仍然有一些情况是Vue无法自动检测到的： - **直接设置数组索引:** 当你利用索引直接设置一个项时，例如`vm.items[indexOfItem] = newValue`。 - **修改数组长度:** 当你修改数组的长度时，例如`vm.items.length = newLength`。对于这两种情况，Vue提供了一些解决方案： - **使用Vue.set()方法:** 可以通过`Vue.set(vm.items, indexOfItem, newValue)`的方式来更新数组中的某一项。 - **使用Array.prototype方法:** 如果你想保持使用JavaScript原生的方法，也可以考虑使用`Array.prototype.splice(indexOfItem, 1, newValue)`。通过合理地使用`v-for`指令以及正确处理数组更新，我们可以有效地利用Vue.js的强大功能来构建动态且响应迅速的应用程序。

在 Vue 中，可以使用 `$watch` 方法来监听数组 `selectionList` 的变化。`$watch` 方法接收三个参数：要监听的属性名、回调函数和选项对象。示例代码如下： ```javascript // 在 Vue 实例中监听 selectionList 数组的变化 this.$watch('selectionList', (newVal, oldVal) => { console.log('selectionList 变化了', newVal, oldVal) }, { deep: true }) ``` 需要注意的是，在监听数组时，需要设置选项对象的 `deep` 属性为 `true`，表示深度监听数组元素的变化。这样，当数组中的元素发生变化时，也能够触发回调函数。

阅读全文

最新推荐

vue中如何监听数组selectionList

相关推荐

React与Vue中监听属性变化的实现

Vue源码揭秘：数组数据监听的拦截器机制

vue watch监听数组

vue深度监听数组对象

vue watch监听数组对象

vue3 监听数组变化

vue watch监听数组元素

vue3监听数组对象

vue2监听数组变化

vue2 监听数组长度变化

vue2监听数组 为什么要重写数组方法

vue如何监听数组对象中属性值的变化

写vue深度监听数组的方法ga

vue监听数组变化获取数组旧值

vue中如何监听数组的变化

vue监听数组变化

vue 怎么定义数组将弹窗信息一一推进去，监听数组变化就取出一个显示，关闭后从数组删除

在Vue 中如何监听数组的变化？

vue 监听数组变化后赋值

最新推荐

vue遍历对象中的数组取值示例

vue 解决数组赋值无法渲染在页面的问题

vue 对象数组中，根据相同属性的数据合并，重组新的数组对象

Vue不能观察到数组length的变化

详解vue 数组和对象渲染问题

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

vue2监听数组为什么要重写数组方法