vue - 指令2

指令(指令可以直接使用data中的数据)

 v-if  条件渲染

v-show

后面跟表达式;

Vue还提供了v-show指令，根据表达式的真假值，切换元素的 display CSS 属性（dom中的行内样式）。

控制的是元素的css中display属性，从而控制元素的显示和隐藏。

<h1 v-show="ok">Hello!</h1>

v-if 和 v-show的区别

 v-for 列表渲染

后面跟表达式;

v-for遍历数组

• v-for="item in 数组名"
• v-for="(item,index) in 数组名"
• item,index就是一个变量名;数组就是data中的数据;

<ul>
   <li v-for="item in arr">{{item}}</li>
   <li v-for="(item,index) in arr">{{index + 1}}--{{item}}</li>
</ul>

 data:{
        arr:['西游记','红楼梦','三国演义','水浒传']

          },

---

v-for遍历数组,数组中的是对象;

遍历的item就是每一项的对象;

index就是每一项对象的下标;

<ul>
   <li v-for="item in arr1">{{item.name}}</li>
   <li v-for="item in arr1">{{item.sex}}</li>
   <li v-for="item in arr1">{{item.age}}</li>
   <li v-for="(item,index) in arr1">{{index +1 }}--{{item.name}}</li> 
</ul>


 data: {
          arr1: [
            { name: "小白", sex: "男", age: 18 },
            { name: "小红", sex: "女", age: 28 },
            { name: "小刚", sex: "男", age: 19 },
            { name: "小龙", sex: "男", age: 20 },
                ]
      }

可以利用of替代in;

<div v-for="item of arr"></div>

v-for遍历对象

• v-for='value in 对象'
• v-for = "(value,key,index) in 对象"
• value是对象的每一项的属性值;
• key是对象的每一项属性名;
• index是对象的下标 0 开始;
• value,key,index只是一个变量名而已,但是需要按顺序;

<ul>
     <li v-for="value in obj">{{value}}</li>
     <li v-for="(value,key) in obj">{{key}}--{{value}}</li>
     <li v-for="(value,key,index) in obj">{{index}}--{{key}}--{{value}}</li>
</ul>


data:{
        obj:{
              name:"小白",
              sex:"男",
              age:"18",
              hobby:"敲代码"
             }
      },

在v-for中使用数字 

用法：n in num
参数：n: 数字，从1开始

<div>
  <span v-for="n in num">{{ n }} </span>
</div>

 data: {
    num: 10
  }

v-for遍历字符串

用法：str in string
参数：str: 字符串，源数据字符串中的每一个

<ul>
    <li v-for="str in string">{{str}}</li>
</ul>


data:{
       string:'hello'
     }

key的使用方法

官方推荐, 使用v-for的时候, 加上一个 key属性;

:key属性绑定,可以使用data中的值;

指令可以直接使用data中的数据

跟踪每个节点的身份，从而重用和重新排序现有元素 ;
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。

key的作用是为了高效的更新虚拟DOM

<ul id="app">
  <li v-for="(person, index) in persons" :key="person">
    {{ person }}
  </li>
</ul>


data: {
    persons: ['小白', '小红', '可可', 'coco']
  }

v-for 和 v-if 一同使用

永远不要把 v-if 和 v-for 同时用在同一个元素上。
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级;

解决方案: 将 v-if 置于外层元素上,v-for遍历内层;

检测数组更新

Vue是响应式, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新;

Vue中观察数据编译的方法 – 用它们改变数组会触发视图的更新;

Vue.set()方法也是响应式的;

• 参数：

  • {Object | Array}:  target (对象/数组)
  • {string | number}:  propertyName/index (属性名 key/下标)
  • {any} : value

(修改的目标,索引值,修改后的值 );

Vue.set(this.books,0,'西厢记')