插值

文本

要進行文本部分替換，可以用 {{}} 將變量元素括起來；

<div id = "app">{{message}} </div> // Vue實例 var app = new Vue({el: '#app',data: {message: 'Hello, Vue'} })

要進行文本全部替換，則可以用 v-text 來進行，比如下面的“測試”將會被 message 的內容所替代；

<div id = "app"><h2 v-text="message">測試</h2> </div> var app = new Vue({el: "#app",data: {message: "公眾號：村雨遙"} })

原始 HTML

雙大括號會將數據解釋為普通文本，但如果我們要插入原始的 HTMl 內容，此時就需要使用 v-html 指令；

<div id="app"><p v-html="rawHtml"></p> </div> var app = new Vue({el: "#app",data: {rawHtml: "<span style="color:red">內容標紅</span>"} })

綁定元素屬性

要實現給元素綁定屬性，可以使用 v-bind 指令，其完整寫法是 v-bind:屬性名="表達式"，簡寫則可以直接省略掉 v-bind，只保留 :屬性名="表達式"，但它屬于單向綁定；

<div id = "app"><h2 v-bind:title="message">Vue In Action！</h2> </div> var app = new Vue({el: "#app",data: {message : "Vue 實戰！"} })

條件與循環

條件指令，也就是我們日常開發中所使用的 if，用 v-if 指令來進行綁定；

<div id="app"><p v-if="found">我被你發現了！</p> </div> var app = new Vue({el: "app",data: {found: true} })

此外，還可以使用 v-else 指令來表示 v-if 的 else 塊，它必須緊跟在 v-if 或 v-else-if 元素的后面，否則它將不會被識別；

<div v-if="type === 'A'">The answer is A </div> <div v-else-if="type === 'B'">The answer is B </div> <div v-else-if="type === 'C'">The answer is C </div> <div v-else>The answer is D </div>

循環指令，也就是我們經常用到的 for 循環，用 v-for 指令來進行綁定，根據數據生成列表結構，其語法是 (item, index) in 數據；

<div id="app"><ul><li v-for="num in nums">{{num.text}}</li></ul> </div> var app = new Vue({el: "#app",data: {nums: [1, 2, 4]} })

處理用戶輸入

要進行用戶與應用之間的交互，可以使用 v-on 指令來添加事件監聽器，通過它來調用 Vue 實例中定義的方法，此外為了減少開發過程中的代碼量，我們還可以使用 @ 來替換 v-on ，它倆可以達到同樣的效果；

<div id = "app"><p>{{message}}</p><button v-on:click="reverseMessage"><!-- <button @click="revuerseMessage"> -->消息反轉</button> </div> var app = new Vue({el: "#app",data: {message: "wechat cunyu1943"},methods: {reverseMessage:function(){this.message = this.message.split(' ').reverse().join(' ')}} })

為了處理不去處理 DOM 事件細節，而只用純粹的數據邏輯來進行操作，Vue 中為 v-on 又提供了 事件修飾符，常見時間修飾符如下：

事件修飾符說明

.stop	表示阻止事件繼續傳播
.prevent	表示時間不再重載
.capture	表示使用事件捕獲模式
.self	表示是當前元素自身時觸發處理函數
.once	表示事件只觸發一次
.passive	表示事件立即觸發

同時，為了實現表單輸入和應用狀態之間的雙向綁定，我們可以使用 v-model 指令；

通過 v-model 指令，能夠便捷的設置和獲取表單元素的值，而且綁定的數據會和表單元素值相關聯；

<div id="app"><p>你的公眾號是：{{ message }}</p>更新你的公眾號：<input type="text" v-model="message"> </div> var app = new Vue({el: "#app",data: {message: "村雨遙"} })

元素的顯示與隱藏

要實現元素的顯示與隱藏，我們可以通過 v-show 這個指令，它會根據表達式的真假，來切換元素的顯示和隱藏狀態。

<div id="app"><img src="https://gitee.com/cunyu1943/images/raw/master/ImgsUbuntu/20200510234310.png" v-show="isShow"> </div> var app = new Vue({el: "#app",data: {isShow: true} })

總結

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

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