(2) vue 指令 事件处理器

1  数据的渲染 {{msg}}

2 Html赋值    v-html=“<p>哎</p> ”             会渲染出p标签       绑定照片 v-bind:src=""       v-for=" 要渲染的数据  in  ajax拿到的数据       " 

3 绑定属性   v-bind:id=" "                           绑定id

4  v-if  v-else v-else-if                                               类似于 v-elsev-else-if 必须紧跟在 v-if 或者 v-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>
<div v-else>
Not A/B/C
</div>

                                           

5  v-bind:class="{'active':isactive,'text':isfalse} "    如果 isactive 是真则绑定        

6  v-bind:style="{color:red,fontSize:1+"px"} " 

7 v-show         显示隐藏      与   v-if   区别    < if 不渲染   v-show 渲染 加载属性 display :block>

vue事件处理器

8 v-click="gett"     ==    @click="gett     点击事件

   v-bind:class   ==  :class

    v-on:click.stop  阻止冒泡

 v-on:click.stop.prevent 阻止默认事件      比如a连接加上 就不会跳转

 v-on:click.once   只点击一次

9 v-on:keyup.

  • .enter  
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

 10    v-model.lazy     v-model.lazy与v-model 不同之处  v-model.lazy 失去焦点之后执行

         v-model.number      只绑定数字

          v-model.trim    前边去空格

原文地址:https://www.cnblogs.com/nns4/p/7449279.html