vue 指令总结

Posted 2021-02-10 zhangweigang

templet：‘ ‘，templet中只能有一个根节点；

v-text：只能用于双标签中，就是给元素的innerText赋值；

v-html：就是给元素的innerhtml赋值；

　　<span v-text="myText"></span>

　　<span v-text="myText"></span>

v-if：如果值为false，在HTML中显示<!---->，为true就插入元素，v-else-if；v-else；

　　<button v-if=" num == 1 "></button>

　　<button v-else-if-=" num == 2 "></button>

　　<button v-else ></button>

v-show:是显示与否的问题；

v-bind：给属性绑定值，从vue到页面的单向数据流

v-bind:value = "变量" ，简写：:file=" ‘常量定义‘ ";

v-on：点击后给属性赋值

　　v-on：click = " myValue = ‘ abc‘ "，简写：@click = " "；

v-model：双向数据邦定，只能给具备value的属性元素进行双向绑定；

v-for：循环数组或对象，

　　<ul>

　　　　<li v-for = " item in stus"  :class = " item.myClass">{{ item.name}} </li>

　　</ul>

　　stus：变量，stus维数组时：(item，index)  :class = " index%2 == 0? ‘ red ‘:‘ green ‘  ";

　　为对象时：v-for = "（value，key，index）in stus";