文档章节

vue 点击当前元素添加class 去掉兄弟的class

o
 osc_g8254g7s
发布于 2019/08/19 18:07
字数 141
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue 点击当前元素添加class 去掉兄弟的class</title>
    <link rel="stylesheet" href="">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <!--<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style type="text/css">
        .blue {color: #2175bc;}
    </style>
</head>
<div id="app">
    <ul>
        <li v-for="(todo, index) in todos" v-on:click="addClass(index)" v-bind:class="{ blue:index==current}">
            {{ todo.text }}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            current:0,
            todos: [
                { text: '选项一' },
                { text: '选项二' },
                { text: '选项三' }
            ]
        },
        methods:{
            addClass:function(index){
                this.current=index;
            }
        }
    })
</script>

</script>
</html>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue获取当前对对象

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue 点击当前元素添加class 去掉兄弟的class</title> <script src="../js/vue.js"></script> </head> <style type="text/css"......

osc_vwtuqll7
2019/04/13
1
0
Vue中,给当前元素添加类名移除兄弟元素类名的方法

在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直...

osc_y7ckpzr9
2019/04/27
3
0
Vue2.0组件实现动态搜索引擎(一)

原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.com/lavyun/vue-demo-search, 自己琢磨着不看代码做了一遍学习...

osc_nrpjz96n
2018/09/12
4
0
vue中点击不同的em添加class去除兄弟级class

vue中使用v-for循环li 怎么点击每个li中的em给添加class删除兄弟元素 <html lang="en"> <head> ff0000;"> </head> <body> </body> </html> 结果图......

osc_0jbt10ev
2019/08/22
1
0
vue.js过度&动画、混入&插件

1.vue 过度动画 1.过度   Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。 语法格式: <transit...

osc_azfwmv8l
2019/11/21
9
0

没有更多内容

加载失败,请刷新页面

加载更多

将分段视频合并

环境 操作系统:Ubuntu Kylin 优麒麟 20.04 LTS 适用架构:AMD64、ARM64(鲲鹏、飞腾) 方法 将下载的视频分片段放入同一个文件夹。按片段排序的文件名汇入list.txt。 ls qq_video*.mp4 | s...

chipo
17分钟前
7
0
C#和C++混合编程系列1-内存管理

2篇前置博文: Http服务器-第十步加入基于Mono平台的C#脚本支持 https://my.oschina.net/kkkkkkkkkkkkk/blog/4322402 架构9-引入C#混合编程-服务端概述 https://my.oschina.net/kkkkkkkkkkk...

梦想游戏人
21分钟前
18
0
SQL使用SELECT * [columnA除外] FROM tableA排除列?

问题: We all know that to select all columns from a table, we can use 我们都知道要从表中选择所有列,我们可以使用 SELECT * FROM tableA Is there a way to exclude column(s) from......

fyin1314
36分钟前
12
0
LVS-NAT模式示例配置

实验环境 Centos 7.6.1810 + ipvsadm v1.27 配置脚本 Director配置(1台) yum install -y ipvsadm; echo 1 > /proc/sys/net/ipv4/ip_forward; ipvsadm -C; # 清空所有集群配置 ipvsadm -A -......

月下狼
36分钟前
9
0
linux 复制 黏贴

飞雪无痕
46分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部