vue指令
Posted fanningwen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue指令相关的知识，希望对你有一定的参考价值。
条件渲染指令
|
指令 |
用法 |
|
v-if v-else-if v-else |
<div id="app"> <p v-if="show">显示这段文本</p> <!--判断多个元素时可以使用vue的内置元素<template>，最终渲染时不会包含该元素--> <template v-if="state==1"> <p>文本</p> <p>文本</p> </template> <p v-if="state==1">当state为1时显示该行</p> <p v-else-if="state==2">当state为2时显示该行</p> <p v-else>否则显示该行</p> <template v-if="type==‘a‘"> <label name="a"></label> <!--切换时出现复用标签问题加key属性:input标签中的值不会被清空加上key，key的值是唯一的--> a:<input key="a-input"> </template> <template v-if="type==‘b‘"> <label name="b"></label> b:<input key="b-input"> </template> <button @click="typeclick">切换</button> </div> <script> var app = new Vue({ el: ‘#app‘, data: { show: true, //为false不显示 state: 1, type:‘a‘ }, methods:{ typeclick:function(){ this.type=this.type==‘a‘?‘b‘:‘a‘; } } }) </script> |
|
v-show |
与v-if用法相同，区别是这个是控制显示隐藏的，无法使用<template> |
以上是关于vue指令的主要内容，如果未能解决你的问题，请参考以下文章