<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind绑定class </title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="box" class="bigbox" v-bind:class="{active: isActive,'text-danger':hasError}">v-bind绑定原生属性class有两种方法 这是第一种</div> <!-- v-bind是专门用来绑定html原生属性的 这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里； 注意key这里加 ‘’或不加都是一样的。 --> <!-- </body> <script type="text/javascript"> new Vue({ el:"#box", data:{ isActive:true, hasError:false //这是一种方法 } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind绑定class </title> </head> <body> <div id="box" class="bigbox" v-bind:class="classObject">v-bind绑定原生属性class有两种方法 这是第二种对象表示</div> v-bind是专门用来绑定html原生属性的 这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里； 注意key这里加 ‘’或不加都是一样的。 </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ classObject:{ //这种方法直接绑定一个对象 isActive:false, hasError:true } } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind绑定class </title> </head> <body> <div id="box" class="bigbox" v-bind:class="[activeClass, errorClass]">v-bind绑定原生属性class有两种方法 这是第三种数组表示</div> v-bind是专门用来绑定html原生属性的 这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里； 注意key这里加 ‘’或不加都是一样的。 </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ //这种方法用数组表示 activeClass:'active', errorClass:'text-danger' } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind绑定class </title> </head> <body> <div id="box" class="bigbox" v-bind:class="[isActive ? activeClass : '', errorClass]">v-bind绑定原生属性class有几种方法 这是第四种数组表示</div> v-bind是专门用来绑定html原生属性的 这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里； 注意key这里加 ‘’或不加都是一样的。 </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ //这种方法用数组表示 activeClass:'active', errorClass:'text-danger' } }) </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind绑定class </title> </head> <body> <div id="box" class="bigbox" v-bind:class="[{ active: isActive }, errorClass]">v-bind绑定原生属性class有几种方法 这是第五种数组表示</div> <!-- v-bind是专门用来绑定html原生属性的 这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里； 注意key这里加 ‘’或不加都是一样的。 --> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ //这种方法用数组表示 activeClass:'active', errorClass:'text-danger' } }) </script> </html> // 二次视频学习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind 实例</title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .classA{ color: red; } .classB{ color: blue; font-weight: bold; } </style> </head> <body> <h1>v-bind实例</h1> <div id="app"> <p><img v-bind:src="imgSrc" alt="" width="200"></p> <p><a :href="webUrl" target="_blank">百度</a></p> <p> <label for="chek">isok值为:{{isok}}</label> <input type="checkbox" id="chek" v-model="isok"> </p> <div :class="className">01、绑定</div> <div :class="{classB:isok}">02、绑定class中的判断</div> <div :class="[classA,classB]">03、绑定class中数组</div> <div :class="isok?classA:classB">04、绑定class中的三元运算符</div> <div :style="{color:color,fontSize:font}">05、绑定style方法-01</div> <div :style="styleObj">06、绑定对象style方法-02</div> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ imgSrc:"http://img1.imgtn.bdimg.com/it/u=3284176169,1506766548&fm=200&gp=0.jpg", webUrl:"http://baidu.com", className:"classA", isok:false, classA:'classA', classB:'classB', color:"yellow", font:'20px', styleObj:{ color:'green', fontSize:'30px' } } }) </script> </body> </html>