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


Posted in Javascript onSeptember 05, 2018

如下所示:

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

Javascript 相关文章推荐
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
Vuex 入门教程
Jan 10 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
js实现弹幕墙效果
Dec 10 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 #Javascript
Node.js 使用request模块下载文件的实例
Sep 05 #Javascript
详解Angular6学习笔记之主从组件
Sep 05 #Javascript
webpack4 入门最简单的例子介绍
Sep 05 #Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 #Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 #Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python开发之for循环操作实例详解
2015/11/12 Python
python的变量与赋值详细分析
2017/11/08 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
pycharm安装及如何导入numpy
2020/04/03 Python
CSS3 简写animation
2012/05/10 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
我的大学生活职业生涯规划
2014/01/02 职场文书
九年级历史教学反思
2014/01/27 职场文书
生产操作工岗位职责
2014/09/16 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android