使用Vue实现点击事件变颜色并且显示选中文字
Posted Chenhoude
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Vue实现点击事件变颜色并且显示选中文字相关的知识，希望对你有一定的参考价值。
使用Vue实现点击事件变颜色并且显示选中文字
首先需要引入Vue.js!!!!! 直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../static/vue.js"></script> <style> ul background-color: aqua; .zg background-color: magenta; </style> </head> <body> <div align="center" id="chd"> <ul v-for="(item,index) in aaa" @click="bbb(item,index)" v-bind:class="zg:number === index"> <li>index item</li> </ul> <hr> <h3>选择了:se</h3> <script> var aaa= new Vue( el:"#chd", data: aaa:[\'蔡徐坤\',\'陈厚德\',\'小熊\',\'大熊\'], se:"", number:0 , methods: bbb:function (item,index) this.se=item; this.number=index; ) </script> </div> </body> </html>
效果如如上面展示
vue点击超链接后变色
参考技术A 两种情况。具体如下：
1.第一种是点击单行元素变色，点击另一行元素时，原来变色的元素变回原来的颜色，始终只有一行元素是变色的。
2.第二种情况是点击后永久变色，点击其他元素变色，不影响已经变色的元素。
以上是关于使用Vue实现点击事件变颜色并且显示选中文字的主要内容，如果未能解决你的问题，请参考以下文章