vue中常用的v-指令
阿新 • • 發佈：2018-11-07
vue中常用的v-指令演示
- 常用指令
- v-text 設定雙標籤元素的innerText
- v-html 設定雙標籤元素的innerHTML
- v-if 插入或者移除元素(true,插入,false移除)
- v-else 保證上方兄弟節點存在v-if || v-else-if
- v-if v-else 只會有其一存在
- v-show 隱藏或者顯示元素
- v-model 雙向資料繫結
- 元素必須有value值, DOM元素的value 與js記憶體變數的屬性進行繫結
class結合v-bind使用
- 變化的屬性可以以v-bind的賦變化的值
- v-bind:屬性名=“表示式||物件”
- 簡寫方式 :屬性名=“表示式||物件”
- 設定一個樣式 三元表示式
- 設定多個樣式 物件的形式
- 物件 {樣式名:是否使用bool,樣式名:是否使用}
methods和v-on的使用
- options:
- methods 是一個物件,key是函式名，value是函式體
- v-on:DOM原生事件=“表示式||函式”
- 如果呼叫函式沒有引數，()可以省略
- 簡寫方式: @事件名=“表示式||函式”
v-for的使用
- v-for=“xxxx in items” :key=“index”
- 總結
- 陣列v-for="(ele,index) in dataArr " :key=“index”
- 物件v-for="(value,key,index) in dataObj" :key=“index”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .app{ width: 500px; margin: 50px auto; background: #ccc; text-align: center; } .red{ color: red; } .border{ border: 1px solid blue; } input{ text-align: center; } ul{ padding: 0; } li{ list-style: none; border: 1px solid blue; } </style> </head> <body> <div class="app"> <h5> {{msg}} </h5> <input type="text" v-model='msg'> <h5 :class='{red:isTrue}'> {{msg}} </h5> <button @click='change'>點選改變</button> <h5 v-if = 'isTrue' v-text = 'msg'></h5> <h5 v-show = 'isTrue' v-html = 'msg'></h5> <ul v-show = '!isTrue'> <li v-for='(item,index) in arr' v-text = 'item'></li> </ul> </div> <script type="text/javascript" src="lib/vue-2.4.0.js"></script> <script type="text/javascript"> let vm = new Vue({ el:'.app', data:{ msg:'<h1>hello world</h1>', isTrue:false, arr:['a','b','c','d'] }, methods:{ change(){ this.isTrue = !this.isTrue; } } }) </script> </body> </html>