穀粒商城學習——P38-39Vue-指令-單向繫結&雙向繫結&v-on\v-for\v-if
阿新 • • 發佈：2021-06-11
插值表示式、v-html、v-text
插值表示式：可以支援js語法，能呼叫js內建函式（必須有返回值）
v-html，能顯示html標籤效果
插值閃爍：使用{{}}的表示式，網速慢的話會先顯示插值表示式，然後才vm渲染，v-html和v-text沒有插值閃爍問題
v-html會對html標籤渲染，v-text會對標籤轉義成字串
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </View Codehead> <body> <div id="app"> {{msg}} {{1+1}} {{hello()}}<br /> <span v-html="msg"></span> <br /> <span v-text="msg"></span> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> //1、vue宣告式渲染 let vm = new Vue({ //生成vue物件 el: "#app", //繫結元素 div id="app" // 可以指定恰標籤，但是不可以指定body標籤 data: { msg: "<h1>Hello</h1>", }, methods: { hello() {return "World" } } }); </script> </body> </html>
效果
v-bind單向繫結
資料變會引起頁面元素變化，但頁面元素變化不會引起資料變化
給標籤的屬性繫結值，v-bind:href給href屬性繫結，v-bind:class給class屬性繫結。v-bind可省略如“v-bind:style”可簡寫成“:style”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 給html標籤的屬性繫結 --> <div id="app"> <a v-bind:href="link">gogogo</a> <!-- class,style {class名：加上？}--> <span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ link: "http://www.baidu.com", isActive:true, hasError:true, color1:'red', size:'36px' } }) </script> </body> </html>View Code
效果：
v-model雙向繫結
頁面元素和資料的變化會影響彼此，一般用於表單、自定義元件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 表單項，自定義元件 --> <div id="app"> 精通的語言： <input type="checkbox" v-model="language" value="Java"> java<br/> <input type="checkbox" v-model="language" value="PHP"> PHP<br/> <input type="checkbox" v-model="language" value="Python"> Python<br/> 選中了 {{language.join(",")}} </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ language: [] } }) </script> </body> </html>View Code
v-on事件繫結，可簡寫成@
vue中常用的全部按鍵別名：enter、tab、delete、esc、space、up、down、left、right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!--事件中直接寫js片段--> <button v-on:click="num++">點贊</button> <!--事件指定一個回撥函式，必須是Vue例項中定義的函式--> <button @click="cancle">取消</button> <!-- --> <h1>有{{num}}個贊</h1> <!-- 事件修飾符 --> <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello"> 大div <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello"> 小div <br /> <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a> </div> </div> <!-- 按鍵修飾符： --> <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br /> 提示： </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods:{ cancle(){ this.num--; }, hello(){ alert("點選了") } } }) </script> </body> </html>View Code
v-for迴圈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'"> <!-- 1、顯示user資訊：v-for="item in items" --> 當前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br> <!-- 2、獲取陣列下標：v-for="(item,index) in items" --> <!-- 3、遍歷物件： v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object" --> 物件資訊：v-value，k-key，i-index <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span> <!-- 4、遍歷的時候都加上:key來區分不同資料，提高vue渲染效率。key必須唯一，因此一般用索引就行 --> </li> </ul> <ul> <li v-for="(num,index) in nums" :key="index"></li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { users: [{ name: '柳巖', gender: '女', age: 21 }, { name: '張三', gender: '男', age: 18 }, { name: '范冰冰', gender: '女', age: 24 }, { name: '劉亦菲', gender: '女', age: 18 }, { name: '古力娜扎', gender: '女', age: 25 }], nums: [1,2,3,4,4] }, }) </script> </body> </html>View Code
v-if&v-show
v-if為true才有元素並渲染
v-show元素一直都有，為true才渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button v-on:click="show = !show">點我呀</button> <!-- 1、使用v-if顯示 --> <h1 v-if="show">if=看到我....</h1> <!-- 2、使用v-show顯示 --> <h1 v-show="show">show=看到我</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { show: true } }) </script> </body> </html>View Code
v-else和v-else-if
語法：
v-if
v-else-if
v-else
相當於java中的
if
elseif
else
View Code
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button v-on:click="random=Math.random()">點我呀</button> <span>{{random}}</span> <h1 v-if="random>=0.75"> 看到我啦？！>=0.75 </h1> <h1 v-else-if="random>=0.5"> 看到我啦？！>=0.5 </h1> <h1 v-else-if="random>=0.2"> 看到我啦？！>=0.2 </h1> <h1 v-else> 看到我啦？！<0.2 </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { random: 1 } }) </script> </body> </html>View Code