vue 指令总结

Posted zhangweigang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 指令总结相关的知识,希望对你有一定的参考价值。

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";

以上是关于vue 指令总结的主要内容,如果未能解决你的问题,请参考以下文章

VUE常用指令总结!

Vue指令总结---小白同学必看

vue.js指令总结

vue 指令总结

vue.js指令总结

Vue 指令总结大全