Vue 里 幾個重要的指令 ——資源來自黑馬程序員

• • • v-text
    • v-html
    • v-on
    • v-show
    • v-if
    • v-bind
    • v-for
    • v-model

——資源來自黑馬程序員)

v-text

<h1 v-text="message" ></h1> 或直接 <h1{{message}></h1>對應script中 <script>el:"#app",data:{message:"hello world"} </script>

v-html

v-html和v-text作為普通文本時效果一樣但html在非文本時會出現不同如下： <h1 v-text="message" ></h1> <h1 v-html="message" ></h1> v-text會把<a href="www.baidu.com">百度</a>直接輸出 但v-html會輸出百度的超鏈接格式對應script中 <script>el:"#app",data:{message:<a href="www.baidu.com">百度</a>} </script>

v-on

v-on用于設置動態事件<input type="button" v-on:click="change" > <input type="button" @click="change" > 對應script中 <script>el:"#app",methods:{change:function(){alert("!!!");}} </script>@keyup.enter="" enter可以換成任何一個鍵位代表敲擊鍵位彈起后運行函數

v-show

v-show用于設置內容是隱藏還是現實，值為true是顯示，false是隱藏可以設置一個按鈕，設置v-on函數為change，點擊后修改v-show的值 <input type="button" @click="change"> <img v=show="isshow" src="./img/x.jpg"> <script>el:"#app",data:{isshow:false},methods:{change:function(){this.isshow=!this.isshow}} </script>

v-if

v-if 根據表達式真假切換元素的顯示和隱藏 一般與v-show一致 v-show 是修飾樣式只控制display v-if 修改dom樹 頻繁操作的元素用v-show,使用較少的用v-if

v-bind

v-bind設置元素屬性，綁定屬性<img v-bind:src="./img/x.jpg"> 或<img :src="./img/x.jpg"><img :class = "{active:isActive}"> <img :class = "isActive?'active':''">

v-for

根據數據形成列表對象 <input type="button" @click="add"><ul><li v-for="(item,index) in arr">{{item}}</li> </ul> <p v-for="item in arr2">{{item.name}} </p><script>el:"#app",data:{arr:["1","2","3"],arr2:[{name:"a"},{name:"b"}]},methods:{add:function(){this.arr2.push({name:"c"});}} </script>

v-model

獲取、設置表單元素的值<div id="app"><input type="text" v-model="message"><p>{{message}}</p> </div><script>el:"#app",data:{message:"hello world"} </script> 在頁面上對text框的內容修改，會同步修改p標簽里的內容，雙向綁定

總結

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

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