本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。
vue.js切换改变颜色的方法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script> <title>变色选择器</title> <style> .zong { display: flex; flex-direction: row; flex-flow: row wrap; } .button_diva { border-radius: 5px; background-color: blue; padding: 0.5rem; width: auto; margin: 0.5rem; color: #fff; } .avtiv { background-color: #000; } </style> </head> <body> <div id="Vue"> <div> <div :class="item.index == status ? 'avtiv':''" v-for="(item,index) in sites" :key="index" @click="bintap(item,index)"> <p>{{item.name}}</p> </div> </div> <div> {{name}} </div> </div> </body> <script> new Vue({ el: "#Vue", data: { status: 0, sites: [ { name: 'Runoob', index:0 }, { name: 'Google', index:1 }, { name: 'Taobao', index:2 }, { name: 'zhoayun', index:3 } ], name: 123 }, methods: { bintap(item,index) { console.log(item.index) this.status = item.index if (item.index == 0) { this.name = 123 } else if (item.index == 1) { this.name = 511 } else if (item.index == 2) { this.name = 456 }else if (item.index == 3) { this.name = 789 } } }, created() { } }) </script> <script> $(document).ready(function () { }); </script> </html>
以上就是vue.js怎么切换改变颜色的详细内容,更多请关注易知道|edz.cc其它相关文章!