Vue指令

Posted 2021-01-16 louyefeng

一.文本指令

• v-text:采用该指令后原文本会被msg替换
• v-html:该指令可以解析带有html标签的文本
• v-once:该指令控制的标签只能被赋值一次

<input type="text" v-model="msg">
<p>{{ msg }}</p>
<p v-text="msg">原文本</p>
<p v-html="msg"></p>
<p v-once="msg"></p>

new Vue({
    el: "#app",
    data:{
        msg:"文本指令",
    }
})

二.v-bind指令

该指令绑定的是属性html标签的全局属性
绑定后属性的属性值可以由变量控制

<p v-bind:title="t1">操作单一变量</p>
<p :title="t1">简写v-bind指令</p>
<p v-bind:title="'t2'">操作普通字符串</p>

<!-- 多类名 单一变量操作 -->
<p v-bind:class="t3">p3p3p3p3p3p3p3p3</p>
<!-- v-bind操作class -->
<!-- [a,b] a,b为变量,对其赋值的是class的具体值,eg: a:"active" b:"red" => class="active red" -->
<!-- {a:b} a为class值,b为值为true|false的变量,控制a的显隐,eg: b:true => class="a" b:false => class="" -->

<!-- v-bind操作style -->
<!-- style一般都是多条样式 -->
<div :style="div_style"></div>
<div :style="{width:'100px',height:'100px',backgroundColor:'pink'}"></div>

三.v-on指令

<!-- v-on指令绑定的是事件,操作的是事件对应的方法 -->
<p v-on:click="func1"></p>
<!-- 简写,直接绑定方法名,不会携带自定义参数,但回调时能取到事件参数ev -->
<p @click="func2"></p>
<!-- 带()的方法绑定.只传入自定义参数,绑定回调时只能取到自定义参数,事件参数ev丢失 -->
<p @click="func3(10)"></p>
<!-- 带()的方法绑定,传入自定义参数同时,显示传入事件$event,回调时可以取到自定义参数以及事件参数ev -->
<p @click="func4($event, 10, 20)"></p>
<p @click="func5(10, $event, 20)"></p>

四.v-model指令

v-model指令是数据的双向绑定,该指令绑定的是value值

<!-- 单一复选框 -->
<!-- val2值为true|false的变量,控制单选框是否被选中 -->
<!-- val3值为自定义"选中"|"未选中",控制单选框是否被选中 -->
<!-- 选中状态,提交给后台key对应的value为on,未选中状态,不向后台提交value值 -->
<input type="checkbox" v-model="val2" name="ck1">
<input type="checkbox" v-model="val3" name="ck2" true-value="选中" false-value="未选中">

<!-- 多复选框 -->
<!-- 多个复选框的v-model绑定一个变量 -->
<!-- 该变量为数组数据,存放的是复选框的value值(value值必须明确) -->
<!-- 出现在数组中的value值对应的复选框默认为选中状态 -->
<div>
    篮球<input type="checkbox" value="lq" v-model="val4" name="ck3">
    足球<input type="checkbox" value="zq" v-model="val4" name="ck3">
    乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3">
</div>

<!-- 多单选框 -->
<!-- 多个单选框的v-model绑定一个变量 -->
<!-- 变量值为多个单选框中一个的value值,则该单选框为默认选中状态 -->
<div>
    男:<input type="radio" value="男" v-model="val5" name="sex">
    女:<input type="radio" value="女" v-model="val5" name="sex">
</div>

五.条件渲染

• v-if

<!-- 在Vue中,使用v-if指令实现一个条件块,后跟的变量为值true | false,也可以是条件表达式 -->
<p v-if="isShow">Yes</p>
<p v-if="2 > 1">Yes</p>

<!-- v-else-if,充当v-if的"else-if"块,可以连续使用 -->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>

<!-- v-else指令表示v-if的else块,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别.-->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  Not A/B
</div>

• v-show

<!-- 这是另一个根据条件展示元素的选项 v-show指令.后跟的变量为值true | false,也可以是条件表达式 -->
<h1 v-show="ok">Yes</h1>
<!-- 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。-->

• v-if VS v-show

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

六.列表渲染

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<!-- 一般列表渲染需要建立缓存 -->
<!-- 列表渲染是循环,需要赋值变量给key,所以key需要v-bind:处理 -->
<!-- v-for遍历数组[]时,接收两个值第一个为元素值,第二个为元素索引 -->
<ul>
    <li v-for="(num, index) in list" :key="index">value:{{ num }} | index:{{ index }}</li>
</ul>
<!-- v-for遍历数组{}时,接收两个值第一个为元素值,第二个为元素键值,第三个为元素索引 -->
<ul>
    <li v-for="(v,k,i) in dic" :key="k">value:{{v}} | key:{{k}} | index:{{i}}</li>
</ul>

new Vue({
    el: "#app",
    data: {
        list: [1, 2, 3, 4, 5],
        dic: {
            name: "小VV",
            age: 88,
            gender: "男"
        }
    }
})