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

2024-10-17 20:27:23

如下所示：

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

用vue2.0实现点击选中active其他选项互斥的效果

在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示楼主用的是jq): <style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; } li:active { cursor: po
利用vue.js实现被选中状态的改变方法

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &
vue通过点击事件读取音频文件的方法

我们项目现在有这样一个需求,通过select元素来选择音频文件的名称,点击按钮可以进行试听. 话不多说,直接上代码: HTML: <div class="testVoice"> <p class="p-title">提示声音:</p> <el-select v-model="valueOpt2" placeholder="请选择"> <el-option v-for=&qu
Vue 菜单栏点击切换单个class(高亮)的方法

步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu
vue实现点击追加选中样式效果

DOM部分 <ul> <li class="liMenu" :class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu" :key="idx">{{item}} </li> </ul> JS data(){ return{ menu:['首页','列表页','详
vue实现点击选中,其他的不选中方法

如下所示: <!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
vue循环中点击选中再点击取消(单选)的实现

没有展开时点击展开之后 <div class="flashread_item_box_time"> <span class="moment_time">9分钟前</span> <div class="flashread_item_box_zan"> <span class="flashread_item_box_item"><i class="ico
Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo  <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button>  <div v-if="ShowHidden" @click.stop="&quo
Vue实现点击按钮进行上下页切换

本文实例为大家分享了Vue实现点击按钮进行上下页切换的具体代码,供大家参考,具体内容如下案例效果: 完整代码如下: <template> <div id="page"> <button class="btn" @click="prePage()">上一页</button> <ul> <li :class="selected == inde
使用vue实现点击按钮滑出面板的实现代码

在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q
JQuery点击行tr实现checkBox选中的简单实例

$(function () { //除了表头(第一行)以外所有的行添加click事件. $("tr").first().nextAll().click(function () { //为点击的这一行切换样式bgRed里的代码:background-color:#FF0000; $(this).children().toggleClass("bgRed"); //判断td标记的背景颜色和body的背景颜色是否相同; if ($(this).children().css
Vue.js 点击按钮显示/隐藏内容的实例代码

实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

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

相关推荐

随机推荐