一招搞定Vue常用指令-Vue.js-PHP中文網

首頁

web前端

Vue.js

一招搞定Vue常用指令

Apr 20, 2021 am 09:32 AM

vue

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

一招搞定Vue常用指令

插入文字：

v-text

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

#插入HTML：

相當於元素的innerHTML屬性

循環遍歷

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

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

/*
 对象数组
 */
 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;},
      ]
}
   &lt;p v-for=&quot;(user,i) in listObj&quot;&gt;--id--{{user.id}}   --姓名--{{user.name}}&lt;/p&gt;

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

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

登入後複製

條件渲染

v-if：是否插入元素

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

屬性綁定

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

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

&lt;p v-bind:属性名=&quot;变量&quot;&gt;&lt;/p&gt;
//可以简写成
&lt;p :属性名=&quot;变量&quot;&gt;&lt;/p&gt;

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

登入後複製

雙向綁定:v-model

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

綁定事件:v-on

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

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

&lt;p v-on:click=&quot; num = 1 &quot;&gt;&lt;/p&gt;
//可以简写成
&lt;p @click=&quot; num = 1 &quot;&gt;&lt;/p&gt;

登入後複製

跳過元素節點

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

只渲染一次

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

推薦學習：vue.js教學

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

一招搞定Vue常用指令

熱門文章

熱門工具標籤

熱門文章

熱門文章標籤

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題