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 相关文章推荐
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
详解Bootstrap插件
Apr 25 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
浅析vue数据绑定
Jan 17 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
在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
使用PHP模拟HTTP认证
2006/10/09 PHP
php 信息采集程序代码
2009/03/17 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Django发送html邮件的方法
2015/05/26 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
好家长事迹材料
2014/01/23 职场文书
京剧自荐信
2014/01/26 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL