Vue学习(三)——v-bind指令

    科技2022-07-17  108

    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>

     

     

     

    Processed: 0.012, SQL: 8