vue常用指令下篇

前言

闲来无事,简单的罗列下vue中常用的一些指令,以及用法,保证一看就会,前文罗列了三个,本篇再来五个常用的指令!

v-html和text──设置标签显示的内容

v-if和v-else──标签的移除或者显示

v-show──标签的显示和隐藏

1.v-html和text

作用同 innerHTML 和 innerText

v-text把值当成普通字符串

v-html把值当成标签进行解析

语法

默认值

注意:内部的插值表达式会被覆盖

2.v-if和v-else

通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁

原理就是:将元素从 DOM 树上添加/移除

语法:

<tfoot v-if="list.length === 0">

v-if注意事项:两个指令必须连在一起

3.v-show

v-show是通过控制dom元素的css样式来实现显隐，不会销毁

语法:v-show=“变量名”

<div v-show="Hide"> //第一步定义变量 
Hide: true, //第二步设置默认 
this.Hide = !this.Hide; //第三步取反判断

v-if有较高的切换渲染开销,v-show有较高的初始渲染开销

频繁或者大数量显隐使用v-show，否则使用v-if

4.v-for

作用:遍历目标结构, 根据数据数量渲染标签

语法:v-for=“(循环变量, 索引) in 目标数据” :key=“唯一的字符串或数字”

目标数据:数组,对象,字符串,数字

item/index 只能在当前 v-for 作用域中使用, 出了 li 就无法使用了

//1.完整写法 
<li v-for="(item, index) in arr" :key="index">{{ item }}</li> 
//2.简写
<li v-for = "item in arr ":key="index">{{item}}</li>