vue - 指令2

目录

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

 v-if  条件渲染

v-show

v-if 和 v-show的区别

 v-for 列表渲染

key的使用方法

v-for 和 v-if 一同使用

Vue.set( target, propertyName/index, value )

---

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

 v-if  条件渲染

后面跟表达式;

在Vue中可以使用v-if来控制模板里元素的显示和隐藏，表达式的值为true就显示，为false就隐藏；

v-if控制的是: 是否渲染这个节点;即元素的创建和销毁；

v-if 后面跟 条件表达式, 表达式的值为真时显示,为假不显示,通常用data中一个变量来接受这个值,通过改变变量的值来控制是否显示;

v-else-if指令可以实现多分支逻辑 ;

v-else 不跟表达式 , 当v-if的表达式为假的时候显示 v-esle的元素 ;

控制一组元素显示隐藏的时候，可以用<template>标签将其包裹，vm不会渲染template标签。

<h3 v-if="isShow">{{msg}}</h3>
<p v-else>{{message}}</p>

v-show

后面跟表达式;

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

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

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

v-if 和 v-show的区别

1.     v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
2. v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 样式的dispaly属性进行切换。
3.   v-if 有更高的切换开销，v-show 有更高的初始渲染开销，
4. 如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
5.     v-show不支持<template>元素
6.     v-show不支持v-else/v-else-if
    

 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中观察数据编译的方法 – 用它们改变数组会触发视图的更新;

数组响应式方法	作用
push()	在数组中最后增加元素;()一个或多个参数
pop()	删除数组中最后一个元素;()不跟参数
shift()	删除数组中的第一个元素;()不跟参数
unshift()	在数组最前面添加元素;()一个或多个参数
splice()	删除 / 插入 / 替换元素; () 开始下标,删除几个,新的参数
sort()	排序,里面传函数
reverse()	倒叙,

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

Vue.set( target, propertyName/index, value )

• 参数：

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

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

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