- 简单的点击div实现颜色的切换(通过class属性实现)
a:代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> <style> .activated{ color: red; } </style> </head> <body> <!--直接调用方法--> <div id="root"> <div @click="handlerClick" :class="{activated:isActivated}"> Hello World </div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data:{ isActivated:false }, methods: { handlerClick:function(){ this.isActivated = !this.isActivated; } }, }); </script> </body> </html>
- 通过class的数组属性实现上面的颜色切换效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> <style> .activated{ color: red; } </style> </head> <body> <!--直接调用方法--> <div id="root"> <div @click="handlerClick" :class="[activated]"> Hello World </div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data:{ activated:""//通过这个变量去控制颜色的有无 }, methods: { handlerClick:function(){ if(this.activated==="activated"){ this.activated = ""; }else{ this.activated ="activated"; } } }, }); </script> </body> </html>
- 通过style的属性实现上面的颜色切换效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <!--可以是:style="styleObj" 也可以是:style="[styleObj]" --> <div :style="styleObj" @click="handlerClick"> Hello World </div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { styleObj:{ color:"black" } }, methods: { handlerClick:function(){ if(this.styleObj.color==="black"){ this.styleObj.color = "red" }else{ this.styleObj.color = "black" } } }, }); </script> </body> </html>
- v-if条件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-if="show">{{message}}</div> <div v-else>Bye</div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { message:"Hello", show:false } }); </script> </body> </html>
当改变show变量值得时候,展示数据
代码2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-if="show==='a'">This is a</div> <div v-else-if="show==='b'">This is b</div> <div v-else>Bye</div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { show:'a' } }); </script> </body> </html>
- v-show和v-if的区别
a:代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-if="show" data-test="v-if">{{message}}</div> <div v-show="show" data-test="v-show">{{message}}</div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { message:"Hello", show:false } }); </script> </body> </html>
可以发现v-show是直接隐藏div,而v-if 是直接删除和添加,所以v-show的性能要高一些。 - 使用v-for去渲染列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <!--把v-for放到template中,我们只需要循环一次即可--> <template v-for="(item,index) in list" :key="item.id"> <div> {{item.text}}-----{{index}} </div> <span> {{item.text}} </span> </template> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { list:[{ id:"001", text:"name1" },{ id:"002", text:"name2" }] } }); </script> </body> </html>
- v-for对对象的循环操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-for="(item,key,index) in userInfo"> {{item}}-----{{key}}-----{{index}} </div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { userInfo:{ name:"name1", age:"28", gender:"male" } } }); </script> </body> </html>
如何动态的修改userInfo中的数据呢?可以使用set方法解决:
下面一种也行:
如果userInfo是一个数组也是可以的:
代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的样式绑定</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-for="(item,index) in userInfo"> {{item}}-----{{index}} </div> </div> <script> var app = new Vue({//创建一个vue的实例,里面的都是一些配置项 el:'#root', data: { userInfo:[1,2,3,4] } }); </script> </body> </html>
vue中的样式绑定以及条件渲染,列表渲染
最新推荐文章于 2023-05-05 20:28:33 发布