文章目錄

• 背景分析
• Vue中的常用指令
• • v-bind
  • v-show
  • v-if 和 v-else
  • v-else-if
  • v-for
  • v-on
  • v-html
  • v-text
  • v-model
• 總結(Summary)

背景分析

傳統的html并不支持表達式、分支語句、循環語句等結構的定義，為了彌補其不足很多前端框架，模板引擎通過在html元素中添加自定義屬性，然后底層再借助解析引擎對html自定義屬性進行處理，以這樣的方式來增強html的功能。

Vue中的常用指令

v-bind

在html中假如希望元素的屬性值隨程序內容的發生而變化，可以借助v-bind或:代替，其基本語法如：

<元素 v-bind:屬性名="變量或js表達式">

也可以采用其簡化形式，其基本語法如：

<元素 :屬性名="變量或js表達式">

案例分析：

<div id="app"><font :color="color">hello</font></div><script>new Vue({el:"#app",data:{color:"red"}});</script>

v-show

v-show為一個專門控制元素的顯示隱藏的特殊指令，其基本語法為：

<元素 v-show=“bool類型的變量或返回bool類型的js表達式”>

當Vue對象掃描到v-show時，就會立刻執行""中的變量或js表達式,
如果變量或js表達式的值為true，則什么也不干，元素保持原樣顯示。如果變量或js表達式的值為false，則new Vue()自動為當前元素添加display:none。

示例關鍵代碼如下：

<style>.pop{width:300px; height:150px;background-color:lightGreen;}.pop>.close{float:right;padding:5px 10px;cursor:pointer;}</style> <div id="app"><button @click="show">show</button><div v-show="display" class="pop"><span class="close" @click="hide">×</span></div></div> <script>//2. 創建new Vue對象new Vue({el:"#app",data:{display:false},methods:{show(){this.display=true;},hide(){this.display=false;}}})</script>

v-if 和 v-else

v-if 和 v-else 是在html實現分支控制，二選一的一種實現方式，在使用時，v-if和v-else對應的的兩個元素必須緊挨著寫！中間不能插入其他元素，其基本語法為：

<元素1 v-if="boolean類型的變量或js表達式"> <元素2 v-else>

示例關鍵代碼如下：

<div id="app"><!--第一個div是已登錄時顯示的內容--><div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注銷</a></h3></div><!--第二個div是未登錄時顯示的內容--><div v-else><a href="javascript:;" @click="login">登錄</a> | <a href="javascript:;">注冊</a></div></div> <script>new Vue({el:"#app",data:{isLogin:false //開局用戶默認是未登錄的},methods:{login(){this.isLogin=true;},logout(){this.isLogin=false;}}})</script>

v-else-if

v-else-if專門和v-if搭配使用，控制多個元素多選一顯示的特殊的指令。其基本語法為：

<元素1 v-if="條件1"><元素2 v-else-if="條件2"><元素3 v-else-if="條件3">... ... <元素n v-else>

注意，v-if和v-else-if和v-else之間必須連著寫，不能插入其他元素。

示例關鍵代碼如下：

<div id="app"><span v-if="score>=90">優秀</span><span v-else-if="score>=80">良好</span><span v-else-if="score>=70">及格</span><span v-else>及格</span></div> <script>var vm=new Vue({el:"#app",data:{score:95}})//在控制臺中: vm.socre=85</script>

v-for

v-for是一個專門用于根據數組內容反復生成多個相同結構的元素的特殊指令。其語法為：

<要反復生成的元素 v-for="(當前元素值, 當前位置) of 數組">

示例關鍵代碼如下：

<div id="app"><!--需求: 根據tasks數組中的任務列表反復生成多個li--><ul><li v-for="(t,i) of tasks" :key="i">{{i+1}} - {{t}}</li></ul></div> <script>var vm=new Vue({el:"#app",data:{//用一個數組保存待辦事項列表tasks:["吃飯", "睡覺"]}})</script>

v-for還可以遍歷對象屬性，例如：

<div id="app"><!--需求: 遍歷lilei對象，在頁面顯示李磊對象的詳細信息--><ul><li v-for="(value,key) of lilei" :key="key">{{key}} : {{value}}</li></ul></div> <script>var vm=new Vue({el:"#app",data:{lilei:{name:"Li Lei",age:11}}})</script>

v-for 還可以進行計數，例如：

<div id="app"><ul><li v-for="i of pageCount" :key="i">{{i}}</li></ul></div> <script>new Vue({el:"#app",data:{pageCount:5 //共5頁}})</script>

v-on

v-on 是一個專門綁定事件處理函數的指令，其基本語法為：

<元素 v-on:事件名="事件處理函數名()">

v-on 也可以使用@符號代替，其基本語法結構為：

<元素 @事件名="事件處理函數名()

如果事件處理函數不需要傳入實參值，則()也可省略,例如：

<元素 @事件名="事件處理函數名">

凡是在頁面中定義的事件處理函數，都要在new Vue()中的methods成員內添加對應的函數實體。

示例關鍵代碼如下：

<div id="app"> <!--點哪個div，哪個div就可以喊自己疼！--> <div id="d1" @click="say('html')">d1</div> <div id="d2" @click="say('css')">d2</div> </div> <script>new Vue({el:"#app",methods:{say(name){console.log(`hello ${name}!`)}}})</script>

v-html

如果{{}}綁定的是一段HTML片段時，是不會交給瀏覽器解析的。而是原樣顯示HTML片段的內容——和DOM中的textContent是一樣的,假如希望html可被解析可以使用v-html代替{{}}。其基本語法結構為：

<元素 v-html="變量"> 這個位置顯示變量內容 </元素>

示例關鍵代碼如下：

<div id="app"><h3>{{msg}}</h3><h3 v-html="msg"></h3></div> <script>new Vue({el:"#app",data:{msg:`來自&lt;&lt;<a href="javascript:;">新華社</a>&gt;&gt;的消息`}})</script>

v-text

v-text是可代替{{}}綁定元素內容的特殊指令,用于設置元素內部的文本內容，而且可以防止因網絡延遲短暫顯示{{}}的現象。其語法為：

<元素 v-text="變量或js表達式"> </元素>

示例關鍵代碼如下：

<div id="app"><!--js的天下 --><h3 v-text=`用戶名:${uname}`></h3><!--js的天下 --><h3 v-text=`積分:${score}`></h3></div> <script>setTimeout(function(){new Vue({el:"#app",data:{uname:"dingding",score:1000}})},6000)</script>

v-model

v-model 是用于實現雙向綁定的指令，既能將程序中的變化，自動更新到頁面上(model->view)，又能將頁面上發生的變化，更新回程序中的變量中(view->model),其基本語法為：

<表單元素 v-model:value="變量">

示例關鍵代碼如下：

<div id="app"><!--單向綁定: (Model->View 不能View->Model)--><!-- <input :value="keyword"> --><!--雙向綁定: (Model->View 又能View->Model)--><input v-model:value="keyword"><button @click="doUpdate">更新</button></div> <script>var vm=new Vue({el:"#app",data:{keyword:"ABC" //開局用戶沒有輸入任何關鍵詞},methods:{doUpdate(){console.log(`查找 ${this.keyword} 相關的內容...`)}}})</script>

單選操作的雙向綁定：

單選操作的value因為是寫死的固定的備選值！用戶在不同radio之前切換選中狀態時，其實改變的是radio的checked屬性值。所以，想用雙向綁定獲得當前選中的radio的值，應該綁定checked屬性:

<input type="radio" value="固定值" v-model:checked="變量">

示例代碼如下：

<div id="app">性別:<label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label><label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label><h3>您選的性別是:{{sex==1?"男":"女"}}</h3></div> <script>new Vue({el:"#app",data:{sex:1}})</script>

select元素的雙向綁定

一個select下包含多個option元素。所有備選值value，都分布在每個option上。但是每個備選值value也是寫死的。用戶每次選擇不同的option時，其實select元素會將選中的option的value值，修改到select的value屬性上。其語法為：

<select v-model:value="變量"><option value="值1">xxx</option>... ...... ... </select>

示例代碼如下：

<div id="app"><select v-model:value="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="hangzhou">杭州</option></select><br/><h3 :src="city"></h3></div> <script>new Vue({el:"#app",data:{city:"beijing"}})</script>

總結(Summary)

本小節，主要是對vue中常用的的一些指令元素進行了分析，在理解和應用的過程中可以參考本文檔和官方文檔再結合實踐進行熟練應用。

總結

以上是生活随笔為你收集整理的04-VUE 常用指令最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。