目錄
1.v-bind
2. class綁定
3.style綁定
4.v-if/v-show
?
1.v-bind
????????v-bind指令用于綁定屬性 可以簡寫成 “? ?：”
? ? ? ? 它的作用就是我們可以動態的定義屬性的值，比如常見的<img src = "1.jpg">
? ? ? ? 我們如果想要修改圖片就需要獲取到DOM對象，然后再重新填充，但是如果使用v-bind，
? ? ? ? 我們就可以動態的生成src屬性值。
下面我們將實現圖片切換的效果：
<html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app" ><img v-bind:src = "path" :style="{width:width , height:height}"><br><button @click = "change()">切換圖片</button></div><script type="text/javascript" src="vue.global.js"></script><script>// 1.創建appconst app = Vue.createApp({// data: option apidata: function() {return {path:"images/1.jpg",width:100,height:100}},methods:{change(){if(this.path==="images/1.jpg"){this.path = "images/2.jpg"}else{this.path = "images/1.jpg"}}}})// 2.掛載appapp.mount("#app")</script> </body> </html>它的邏輯關系如下：
所以說，vue主要是實現對數據的操作，而js是對DOM對象的操作
?
2. class綁定
? ? ? ? class是表示類選擇器，常用的還有id選擇器等。
? ? ? ? v-bind同樣可以綁定class，只是寫法略有不同。
? ? ? ? 接下來，我們實現經常在網頁上看見的多選項選擇時，選到哪個，哪個就會高亮顯示。
? ? ? ? 代碼如下：
<html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>li{width: 50px;height: 25px;display: block;float: left;background-color: #999;border: 1px solid;padding-left: 5px;}.red{background-color: red;}</style><div id="app"><ul><li :class="{red:num==1}" @click = "change(1)">選項1</li><li :class="{red:num==2}" @click = "change(2)">選項2</li><li :class="{red:num==3}" @click = "change(3)">選項3</li></ul></div><script type="text/javascript" src="vue.global.js"></script><script>// 1.創建appconst app = Vue.createApp({// data: option apidata: function() {return {num:1}},methods:{change(num){this.num = num}}})// 2.掛載appapp.mount("#app")</script> </body> </html>? ? ? ? 執行邏輯如下：
3.style綁定
? ? ? ? style表示樣式，同樣我們也可以用vue綁定style，實現樣式屬性的動態生成。
我們實現一個按鈕控制一個div盒子的長寬高，顏色等樣式，示例如下：
<html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>li{width: 40px;height: 20px;border: 2px , solid;background-color: #999;float: left;display: block;}#context{clear: both;border: 1px solid;width: 100px;height: 100px;background-color: aqua;margin-left: 40px;}li:hover{background-color: red;}</style><div id="app"><ul><li @click = "change(0)">變寬</li><li @click = "change(1)">變高</li><li @click = "change(2)">變色</li><li @click = "change(3)">隱藏</li><li @click = "change(4)">重置</li></ul><div id="context" :style="{width:width , height:height,'background-color':color,display:none}"></div></div><script type="text/javascript" src="../vue.global.js"></script><script>// 1.創建appconst app = Vue.createApp({// data: option apidata: function() {return {width:100 , height:100 , color:'aqua' , none:'block'}},methods:{change(num){if(num==0){this.width = this.width+10}if(num==1){this.height = this.height+10}if(num ==2){this.color = 'red' ; }if(num==3){this.none = 'none' ; }if(num==4){this.width = 100 ; this.height = 100 ; this.color = 'aqua';this.none = 'block'}}}})// 2.掛載appapp.mount("#app")</script> </body> </html>?實現邏輯：
效果展示：
4.v-if/v-show
????????v-if 指令 條件渲染.如果條件為true，那么它會生成一個DOM元素并且插入；
? ? ? ? 如果為false，那么直接連DOM元素都不生成。
? ? ? ? v-show作用和v-if一樣，只是當它為true或者false都會生成DOM對象；
? ? ? ? 只是當然為false時，會把DOM對象隱藏起來。
示例：實現點擊哪個按鈕顯示對應的內容，其他的內容會被隱藏，效果如下：
實現代碼如下：
<html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用v-if實現元素的顯示與隱藏</title> </head> <body><style>.red{background-color: red;}ul , li{float: left;display: block;margin-left: 10px;background: color #999;}li{border: 1px red;height: 30px;width: 100px;text-align: center;}li:hover{background-color: red;}#context{clear: both;}</style><div id="title"><ul><li :class="{red:flag==0}" @click ="change(0)">清純男大</li><li :class="{red:flag==1}" @click="change(1)">油膩騷男</li><li :class="{red:flag==2}" @click="change(2)">懷院校草</li></ul><ul id="context"><li v-if="flag==0">劉馳宇</li><li v-if="flag==1">李杭濤</li><li v-show="flag==2">黃嘉樂</li></ul></div><script type="text/javascript" src="../vue.global.js"></script><script>// 1.創建appconst app = Vue.createApp({// data: option apidata: function() {return{flag : 0}},methods:{change(flag){this.flag = flag;}}})// 2.掛載appapp.mount("#title")</script> </body> </html>主要邏輯如下：
)
