欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

vue实现点击选中,其他的不选中方法

程序员文章站 2023-10-24 08:14:47
如下所示：

如下所示：

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>选中效果</title>
 <script src="../static/js/vue.min.js"></script>
 <style>
  ul li.active{
   color: green;
  }
 </style>

</head>
<body>

<div id="app">
 <ul>
  <li v-for="items in navlist" :class="{active:items.isactive}" @click="activefun(items)">
   <a>
    {{items.text}}
   </a>
  </li>
 </ul>
</div>

<script>
 new vue({
  el: '#app',
  data: {
   navlist: [
    {text: '首页', isactive: true},
    {text: '简介', isactive: false},
    {text: '活动', isactive: false},
    {text: '联系', isactive: false}
   ]
  },
  methods: {
   activefun: function(data){
    this.navlist.foreach(function(obj){
     obj.isactive = false;
    });
    data.isactive = !data.isactive;
   }
  }
 });
</script>


</body>
</html>

以上这篇vue实现点击选中,其他的不选中方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： C# Main方法的传入参数研究

下一篇： Vuejs2 + Webpack框架里,模拟下载的实例讲解

推荐阅读