vue中v-for系统指令的使用

v-for指令可以用来遍历数组/对象

它可以根据data中数据的更新动态刷新视图

1. 遍历数组

1.1 使用方式: v-for="item in arr" item是一个参数,表示数组中的每一项,arr也是一个参数,表示你要遍历的数组

1.2 使用方式: v-for="(item, index) in arr" index表示数组项的索引 ?

2. 遍历对象

2.1 使用方式:v-for="value in obj" value 表示对象的属性的值 obj就是需要遍历的对象

2.2 使用方式:v-for="(value, key, index) in obj" key表示对象的键 index表示这个对象属性的索引,类似上面的数组的index

注意:使用下面两种方式不能够动态刷新视图

1. 使用数组的length属性去更改数组的时候不行

2. 使用索引的方式去更改数组也不行

解决方式:

1. Vue.set(arr, index, value)方法 arr:表示需要设置的数组,index表示数组索引,value表示该索引项的新的值?,例如:Vue.set(vm.list, 0, {id: 111, name: ‘jack‘})

2. 直接调用数组的splice()方法

注意: 使用v-for渲染数据的时候,一定要记得将key属性加上去, 并且要保证这个key的值是唯一并且不重复的,它的作用就是用来唯一标识数据的每一项,提高渲染性能?

原文地址:https://www.cnblogs.com/mushitianya/p/10505303.html

时间: 2024-08-30 13:15:38

vue中v-for系统指令的使用的相关文章

vue中的v-for循环指令使用

循环数组: 1:直接遍历数组中的数据 2:遍历索引和值 注意:value在前面,不要写反了,后面的参数才是对应的索引值. 遍历对象: 1:遍历值 2:遍历key和value 注意:和数组一样,前面是value,后面是key. 3:遍历value . key .index 注意:参数对应的值 原文地址:http://blog.51cto.com/11871779/2123406

vue中常用到的指令

? v-text:更新元素的textContent:例如:<span v-text="msg"></span> 等同于 <span>{{msg}}</span>: ? v-html:更新元素的innerHTML ? v-bind:响应并更新DOM特性:简写:: :例如:v-bind:href v-bind:class v-bind:title v-bind:bb ? v-on:用于监听DOM事件:简写:@ : 例如:v-on:click

Vue中v-on的指令以及一些其他指令

1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button" value="按钮" v-on:click="btn"> </div> <script> var vm = new Vue({ el: '#app', //methods是用来专门存放vue的处理方法的 methods: { btn

vue中常见的指令

1,差值表达式{{}} 1 <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> 3.v-text是没有闪烁问题的. 1 <h4 v-text="msg"></h4>//注意:v-text会覆盖元素中的原本的内容,差值表达式只会替换自己的这个占位符 3 <h4 v-text="msg">=======<

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

Vue中自定义指令的使用方法!

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令.举个聚焦输入框的例子,如下:(咳咳,借官网的用一用) 1.定义全局的自定义变量 main.js Vue.directive('color',{ inserted(el){ // 各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM cons

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

Vue 中的 v - if 和 v - show + v-for

v-if   v-show v-if是动态的向DOM树内添加或者删除DOM元素: v-if和v-show 都可以控制显示隐藏 v-if 它是没有加载DOM结构 可以叫做惰性加载 <div id="app"><h1 v-if='true'>{{msg1}}</h1> <span>显示</span> <br><h1 v-if='false'>{{msg2}}</h1> <span>不