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

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

程序员文章站 2023-12-02 08:26:40
如下所示：

如下所示：

<!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实现点击选中,其他的不选中方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： 解决vue 引入子组件报错的问题

下一篇： jQuery实现动画、消失、显现、渐出、渐入效果示例

推荐阅读