lichen360 【VUE教程】点击当前li，只改变当前class属性，并去掉其他li对应属性
绑定class属性到当前点击的li标签 这个案例很多地方都用的到：
1、比如点击变色。
2、点击切换图片样式。
3、更多的鼠标事件都会用到此功能。
这里小H为了简单易懂，用VUE前段框架简单写了一个点击当前Li改变字体颜色的案例。
代码分解：里面用到了index（下标），创建变量$xiabiao，默认值设为0，将下标赋值给变量。最后相当于在HTML里面就进行判断了，大家看到这段代码了么 {yangshi: index==xiabiao}这里的index==xiabiao如何是true那么就会显示样式yangshi，如果是false就会不显示，所以当我们点击的时候赋值给变量xiabiao，那么每点击那个li他们都是相等的所以布尔值就是true，然后其他的index值就不相等，所以就是false，就起到了点击哪个，哪个就赋有class属性yanshi了。你明白了么？此教程为HMP源码网小H手写教程，尊重劳动成果请勿复制拷贝盗用与其他网站，一经发现必究责。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定class属性到当前点击的li标签-vue 点击当前元素添加class 去掉兄弟的class属性</title>
</head>
<body>
<style>
.yangshi{color:red;}
</style>
<div id="app">
<ul>
<li :class="{yangshi: index==xiabiao}" v-on:click="dianji(index)" v-for="(name,index) in nameAll">
{{index}}--{{name}}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
nameAll: ['毛毛','毛毛博客资源网','百度','腾讯'],
//b1:true,
xiabiao: 0
},
methods: {
dianji: functiоn (index) {
this.xiabiao=index;
},
}
})
</script>
</body>
</html>
如下载链接失效，请联系管理员处理【QQ：941007525，微信:style028666】
免责申明：
本站资源均来源于互联网，如有侵权请联系站长！将第一时间删除
本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
资源仅供学习参考请勿商用或其它非法用途，否则一切后果用户自负！
毛毛博客 » 【VUE教程】点击当前li，只改变当前class属性，并去掉其他li对应属性
免责申明：
本站资源均来源于互联网，如有侵权请联系站长！将第一时间删除
本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
资源仅供学习参考请勿商用或其它非法用途，否则一切后果用户自负！
毛毛博客 » 【VUE教程】点击当前li，只改变当前class属性，并去掉其他li对应属性
