一招搞定Vue常用指令

本篇文章給大家詳細介紹Vue的常用指令。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

插入文字：

v-text

#相當於元素的innerText屬性，必須是雙標籤

#插入HTML：

相當於元素的innerHTML屬性

循環遍歷

v-for的使用，除了item屬性，還有一些其他輔助屬性

 /* 在html中使用v-for指令进行渲染 */
/*
 普通数组
 */
  data:{
      list:[1,2,3,4,5,6]
   }
  <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

/*
 对象数组
 */
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:&#39;zs1&#39;},
        {id:2, name:&#39;zs2&#39;},
        {id:3, name:&#39;zs3&#39;},
        {id:4, name:&#39;zs4&#39;},
        {id:5, name:&#39;zs5&#39;},
        {id:6, name:&#39;zs6&#39;},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:&#39;托尼.贾&#39;,
        gender:&#39;男&#39;
      }
 }
 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

/*
 数字
 <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
 */
<p v-for="count in 10">这是第{{count}}次循环</p>

條件渲染

v-if：是否插入元素

v-show是否隱藏元素，根據CSS進行元素的渲染

屬性綁定

#v-bind：屬性名稱=「常數|| 變數名稱」

簡單寫形式：屬性名稱=「常數|| 變數名稱」

<p v-bind:属性名="变量"></p>
//可以简写成
<p :属性名="变量"></p>

//如果要赋值常量，需要给常量用单引号包起来，如
<p :属性名=" &#39;常量&#39; "></p>

雙向綁定:v-model

所謂的雙向綁定，就是你在視圖層裡面改變了值，vue裡面對應的值也會改變。只能給予具備value屬性的元素進行雙向資料綁定。

綁定事件:v-on

v-on:click = “方法名稱|| 直接改變vue 內部變數”，

簡寫形式：@click = “方法名稱|| 直接改變vue 內部變數」

<p v-on:click=" num = 1 "></p>
//可以简写成
<p @click=" num = 1 "></p>

跳過元素節點

v-pre：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

只渲染一次

v-once：只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。

推薦學習：vue.js教學

#

以上是一招搞定Vue常用指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！