1.动态绑定链接
src="link"或者src="{{link}}"都是不可取的，我们需要通过v-bind属性来动态绑定链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="jdg"> <img v-bind:src="link" alt=""> </div> <script src="../vue.js"></script> <script> setTimeout(function(){ const app=new Vue({ el:'#jdg', data:{ link:'http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_dde741b7087a8f625d74842e0a56b392/0' } }) },1000) </script> </body> </html>v-bind:src="link"是动态绑定链接的方法，或者采用语法糖的语法 :src="link"
2.动态绑定class——对象语法
我们也可以对class使用v-bind，这样我们可以 v-bind:class="{类名1:boolean,类名2:boolean}" 这样调用可以控制元素的样式显示，布尔值为真，则显示该样式，为假就不显示该样式，布尔值可以使用data中的某个变量数据代替方便控制。并且如果有些样式是固定的，我们就可以直接class="样式名"，这两个可以同时存在，会被浏览器叠加显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .ylow{ color: red; } .line{ text-decoration: underline; } </style> </head> <body> <div id="jdg"> <h1 v-bind:class="{ylow:isYellow,line:haveLine}">我们LGD是不可战胜的！</h1> <button v-on:click="beBlack">变黑</button> </div> <script src="../vue.js"></script> <script> setTimeout(function(){ const app=new Vue({ el:'#jdg', data:{ isYellow:true, haveLine:true }, methods:{ beBlack:function(){ this.isYellow=false; } } }) },1000) </script> </body> </html>
我们还可以使用方法来为元素绑定属性
<h1 v-bind:class="H1Getclasses()">我们LGD是不可战胜的！</h1>
以下是在methods中定义的方法：
H1Getclasses:function(){
return {ylow:this.isYellow,line:this.haveLine};
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .ylow{ color: red; } .line{ text-decoration: underline; } </style> </head> <body> <div id="jdg"> <h1 v-bind:class="H1Getclasses()">我们LGD是不可战胜的！</h1> <button v-on:click="beBlack">变黑</button> </div> <script src="../vue.js"></script> <script> setTimeout(function(){ const app=new Vue({ el:'#jdg', data:{ isYellow:true, haveLine:true }, methods:{ beBlack:function(){ this.isYellow=false; }, H1Getclasses:function(){ return {ylow:this.isYellow,line:this.haveLine}; } } }) },1000) </script> </body> </html>这样效果是一样的。
3.动态绑定class——数组语法
v-bind:class="[xxx,'xxx',xxx]"，像这样的语法是数组语法，我们在数组中写入需要添加的样式，如果加了引号的话就是表示是一个固定的写在CSS文件中的某一个样式类，表示一个字符串，没有加引号的话就表示一个变量，真正添加上去的样式是这个变量中存储的字符串。
注意，数组语法其实也可以使用方法调用，向上面对象语法那样使用即可，但是需要返回的是数组。 4.动态绑定style——对象语法
v-bind:style="{属性名:属性值}"，属性值如果是一个常量，那么需要加上引号，如果是一个变量，那么不用加引号，并且该属性的值就是变量中存储的字符串。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <p :style="{fontSize:'50px',color:fcolor}">我知道你和我就像是豆浆油条</p> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed:[false,false,false,false], fcolor:'red' }, methods: { } }) </script> </body> </html>这种用法仍然可以使用方法函数来返回调用，用法和上面的class用法相似。
5.动态绑定style——数组语法
v-bind:style="[xxx,xxx]"xxx是变量名，里面存放的是样式的对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <p :style="[fcolor,Fcolor]">我知道你和我就像是豆浆油条</p> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed:[false,false,false,false], fcolor:{fontSize:'50px',backgroundColor:'yellow'}, Fcolor:{color:'red'} }, methods: { } }) </script> </body> </html>
