v-text

• 作用：渲染文本到標簽上，跟JQuery的text()方法類似
• 直接上例子：

<script>var app = new Vue({el: "#app",data:{name:"張三先生",age: 30}}); </script> <div id="app"><h4>{{name}}</h4><h4 v-text="name"></h4><h4 v-text="name+'，你好！'"></h4> </div>

結果如下：

v-html

• 作用：渲染html代碼到標簽內容，跟JQuery的html()方法類似

var app = new Vue({el: "#app",data:{name:"<span style='color:red;'>張三先生</span>"} }); <div id="app"><p v-html="name"></p> </div>

運行后就會輸出紅色字體的張三先生，這里就不貼圖了

v-on

• 作用：綁定dom元素各種事件，例如點擊、雙擊等等。事件方法寫在methods對象內部。
• 傳參：vue的事件不需要傳遞參數，直接在事件內部操作data對象就行了
• v-on事件可以簡寫為@

<div id="app"><input type="button" value="提示" v-on:click="test" /><input type="button" value="簡寫" @click="test" /><p>{{message}}<input type="button" value="點擊改變內容" @click="changeData" /></p> </div> <script>var app = new Vue({el: "#app",data:{message:"今天天氣不錯"},methods:{test:function(){alert("這是一個提示信息！");},changeData:function(){this.message = "突然就下雨了";}}}); </script>

v-show

• 作用：根據表達式的返回值true/false，控制元素的顯示和隱藏
• 原理：通過設置css的display屬性來切換顯示、隱藏

<div id="app"><input type="button" value="切換" @click="change" /> <br /><img src="https://cn.vuejs.org/images/logo.png" v-show="isShow" /></div> <script>var app = new Vue({el: "#app",data:{isShow: true},methods:{change:function(){this.isShow = !this.isShow;}}}); </script>

v-if

• 作用：和v-show一樣，根據表達式的返回值true/false，控制元素的顯示和隱藏
• 原理：通過操作dom的添加、移除來控制顯示狀態，注意當隱藏時整個dom元素都會被刪除，這點和v-show是不同的。

v-bind

• 作用：為元素綁定屬性值，例如src、title、class
• 寫法是v-bind:屬性名=""，可以簡寫為 :屬性名=""

<div id="app"><!--以下2種寫法作用相同--><p v-bind:class="isActive ? 'active' : ''">這是一段文本</p><p v-bind:class="{active: isActive}">這是一段文本</p><input type="button" value="切換樣式" @click="changeRed" /></div> <style>.active {color:red;}</style> <script>var app = new Vue({el: "#app",data:{isActive: false},methods:{changeRed:function(){this.isActive = !this.isActive;}}}); </script>

v-for

• 作用：遍歷數組生成對用的dom，比如用于ul-li生成、table-row生成

<div id="app"><input type="button" value="增加" @click="add"> <br/><ul><li v-for="(item, index) in userList" :key="index">{{index}}：{{item.name}}</li></ul></div> <script>var app = new Vue({el: "#app",data:{userList:[{ name: "張三" },{ name: "李四" },{ name: "王五" }]},methods:{add:function(){this.userList.push({ name: "宋六" });}}}); </script>

v-model

• 作用：表單元素數據的綁定，注意這是雙向綁定。意思就是，表單控件值變了，則綁定的對象也會跟著變化；如果通過代碼修改了對象值，則控件值也會同步變化。
• v-model是vue業務開發的核心，涉及到頁面提交的都會用到

<!--效果，文本框輸入值變化，下面h4內容跟著變--><div id="app"><input type="text" v-model="message" /><h4>{{message}}</h4></div> <script>var app = new Vue({el: "#app",data:{message: "今天天氣真好"}}); </script>

總結

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

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