指令是以資料去驅動DOM行為，簡化DOM操作，常用指令如下
-
v-text innertext，不能決議文本中的html標簽
-
v-html innerhtml，可決議文本中的html標簽
- v-show 控制元素的顯示、隱藏
-
v-if、v-else-if、v-else 滿足條件才顯示對應的元素
-
v-for 遍歷陣列、物件
- v-bind 單向資料系結
- v-model 雙向資料系結
- v-on 事件系結
demo v-text、v-html、v-show
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <script> new Vue({ el:'#div1', template:'<p v-text="info"></p>', //相當于'<p>{{info}}</p>' data:function(){ return{ info:"are you ok?" //如果里面含有html標簽，不決議，直接作為文本輸出 } } }); new Vue({ el:'#div2', template:'<p v-html="info"></p>', data:function(){ return{ info:"<h3>are you ok?</h3>" //會決議里面的html標簽 } } }); new Vue({ el:'#div3', template:'<p v-show="display">are you ok?</p>', //指定一個變數，變數名不一定要是display，什么都行，display不是指的css屬性名 data:function(){ return{ display:true //boolean值，true——顯示，false——不顯示（隱藏），不再占據空間 } } }); </script>
demo v-if系列 條件判斷
<div id="app"> <p v-if="score>80">優秀</p> <p v-else-if="score>60">及格</p> <p v-else>不及格</p> </div> <script> new Vue({ el:'#app', data:function(){ return{ score:85 } } }); </script>
滿足條件才顯示對于的元素，
new Vue()中，template、data均可選，
所謂template 模板，就是內容的模板，內容（包括指令）可以寫在元素里、也可以寫在template里
<div id="app1">姓名：{{name}}</div> <!--直接寫在元素里--> <div id="app2"></div> <script> new Vue({ el:'#app1', data:function(){ return{ name:'chy' } } }); new Vue({ el:'#app2', template:'<p>姓名：{{name}}</p>', //寫在template里 data:function(){ return{ name:'chy' } } }); </script>
效果是一樣的，
return { } 回傳的是一個物件，
data的2種寫法
data:function(){ //指向匿名函式 return { content:20 } }, data(){ //直接作為函式名 return { content:20 } },
效果都是一樣的，
demo v-for 遍歷陣列、物件
<ul id="app1"> <li v-for="(item,index) in array">第{{index}}項：{{item}}</li> <!-- index從0開始，一個元素填充一個li --> </ul> <ul id="app2"> <li v-for="(key,value) in object">{{key}}：{{value}}</li> <!-- item、index、array、key、value、object都是變數，可以自己指定，不是固定的 --> </ul> <script> new Vue({ el:'#app1', data:function(){ return{ array:["手機","平板","電腦"] //陣列 } } }); new Vue({ el:'#app2', data:function(){ return{ object:{name:'chy',age:20} //物件 } } }); </script>
demo v-bind、v-model 單雙向資料系結
<div id="app1"></div> <div id="app2"></div> <script> new Vue({ el:'#app1', //單向系結，value指定變數名，記憶體中變數值的變化會同步到視圖，但視圖中值的變化不會影響|同步到記憶體中的變數 //如果其他屬性要使用此變數值，屬性名前面加冒號，比如這局代碼的 template:'<div><input v-bind:value="https://www.cnblogs.com/chy18883701161/p/name" : /> 值是{{name}}</div>', data:function(){ return{ name:'chy' //記憶體中的變數值 } } }); new Vue({ el:'#app2', //雙向系結，記憶體中變數值的變化會同步到視圖，視圖中值的變化也會同步到內初變數 template:'<div><input v-model:value="https://www.cnblogs.com/chy18883701161/p/age" : /> 值是{{age}}</div>', data:function(){ return{ age:20 } } }); </script>
可以 v-bind|model:value="https://www.cnblogs.com/chy18883701161/p/變數名" 來系結，也可以 v-bind|model="變數名" 來系結，相比而言，后者更簡單，
v-bind|model與<input />系結時，是與<input />的value系結，
demo v-on 事件系結
<div id="app1"></div> <div id="app2"></div> <script> new Vue({ el:'#app1', //可以修改記憶體中的變數，但不能直接執行alert()、console.log()之類的陳述句 template:'<button v-on:click="content=\'click me\'">{{content}}</button>', data:function(){ return{ content:'btn1' } } }); new Vue({ el:'#app2', // 也可以呼叫方法，要執行什么陳述句需要放在方法中，指定方法名 template:'<button v-on:click="showInfo">{{content}}</button>', data:function(){ return{ content:'btn2' } }, methods:{ showInfo:function(){ //冒號前面寫方法名 alert("you clicked btn2"); } // 可以寫多個方法，逗號分隔 } }); </script>
template中可以寫很多內容
<div id="app"></div> <script> new Vue({ el:'#app', template:'<div><h3>this is a title</h3><p>this is first paragraph</p><p>this is second paragraph</p></div>', data:function(){ return{ content:'btn1' } } }); </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/137743.html
標籤：JavaScript
上一篇：Vue 入門
下一篇：Vue 過濾器