iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >vue如何实现点击当前增加class
  • 687
分享到

vue如何实现点击当前增加class

2024-04-02 19:04:59 687人浏览 独家记忆
摘要

小编给大家分享一下Vue如何实现点击当前增加class,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:<div&n

小编给大家分享一下Vue如何实现点击当前增加class,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

如下所示:

<div id="app">
<p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p>
</div>
 
<script>
new Vue({
el: '#app',
data: {
datas: {
data1: {
data: "测试1",
ifAdd: 0
},
data2: {
data: "测试2",
ifAdd: 1
},
data3: {
data: "测试3",
ifAdd: 2
}
},
qwerqwre:"0"
},
 
 
methods: {
addClassFun: function(index) {
this.qwerqwre = index;
}
}
})
</script>

以上是“vue如何实现点击当前增加class”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: vue如何实现点击当前增加class

本文链接: https://www.lsjlt.com/news/76937.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何实现点击当前增加class
    小编给大家分享一下vue如何实现点击当前增加class,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:<div&n...
    99+
    2024-04-02
  • vue2.0中click点击当前li如何实现动态切换class
    这篇文章主要为大家展示了“vue2.0中click点击当前li如何实现动态切换class”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue2.0中click点...
    99+
    2024-04-02
  • vue如何获取当前点击的元素
    在vue中获取当前点击元素的方法:1.新建html项目,引入vue;2.插入div标签,绑定click事件;3.插入脚本标记,写入事件函数;具体步骤如下:首先,新建一个html项目,并在项目中引入vue;<!DOCTYPE ...
    99+
    2024-04-02
  • jquery表单如何实现点击增加一行
    这篇文章主要介绍“jquery表单如何实现点击增加一行”,在日常操作中,相信很多人在jquery表单如何实现点击增加一行问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jque...
    99+
    2024-04-02
  • javascript如何点击增加盒子
    这篇文章主要为大家展示了“javascript如何点击增加盒子”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何点击增加盒子”这篇文章吧。 ...
    99+
    2024-04-02
  • php如何实现点击按钮表格增加一行
    这篇文章主要介绍“php如何实现点击按钮表格增加一行”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php如何实现点击按钮表格增加一行”文章能帮助大家解决问题。首先,我们先准备一个表格并设置好最初的行...
    99+
    2023-07-05
  • jquery如何点击按钮删除当前行
    小编给大家分享一下jquery如何点击按钮删除当前行,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 方法:1、给按钮元素绑定click点击事件,指定事件处理函数...
    99+
    2024-04-02
  • javascript如何实现点击加一
    这篇文章主要介绍了javascript如何实现点击加一,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 方法:1、...
    99+
    2024-04-02
  • mysql实现当前时间增加5分钟的案例
    小编给大家分享一下mysql实现当前时间增加5分钟的案例,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!在mysql中可以通过语句“DATE_FORMAT(ADDDATE(NOW(), INTE...
    99+
    2024-04-02
  • vue如何动态绑定class选中当前列表变色
    这篇文章主要介绍了vue如何动态绑定class选中当前列表变色的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何动态绑定class选中当前列表变色文章都会有所收获,下面我们一起来看看吧。在methods中...
    99+
    2023-07-04
  • vue如何给页面增加url前缀
    目录vue页面增加url前缀vue路径上设置指定的前缀解决总结vue页面增加url前缀 在main.js中找到这段代码 const createRouter = () => n...
    99+
    2022-12-09
    vue url前缀 vue页面增加url前缀 vue页面url前缀
  • jquery如何在前面增加子节点
    这篇“jquery如何在前面增加子节点”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jqu...
    99+
    2024-04-02
  • vue如何使用点击事件实现num加减功能
    这篇文章将为大家详细讲解有关vue如何使用点击事件实现num加减功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<!DOCTYPE html> &...
    99+
    2024-04-02
  • vue如何实现点击切换页面
    本篇内容介绍了“vue如何实现点击切换页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue实现点击切换页面的方法:1、注册一个组件,并在...
    99+
    2023-07-04
  • vue如何利用树形组件实现删除双击增加分支
    这篇“vue如何利用树形组件实现删除双击增加分支”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何利用树形组件实现删除...
    99+
    2023-07-04
  • Android切换前后台点击通知进入当前页面怎么实现
    本篇内容主要讲解“Android切换前后台点击通知进入当前页面怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android切换前后台点击通知进入当前页面怎么实现”吧!首先,先展示效果,有...
    99+
    2023-07-05
  • jquery如何实现点击加一个数字
    这篇文章给大家分享的是有关jquery如何实现点击加一个数字的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。方法:1、创建一个button按钮并绑定click点击事件,指定一个事件...
    99+
    2024-04-02
  • vue如何实现点击选中取消切换
    目录vue点击选中取消切换vue点击选中,再次点击取消举个栗子vue点击选中取消切换 html <el-button @click="searchStatisticsInfo(...
    99+
    2024-04-02
  • python如何实现获取当前设备的地点位置
    这篇文章主要介绍了python如何实现获取当前设备的地点位置,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、环境介绍Python版本 : Python3.8开发工具 : P...
    99+
    2023-06-29
  • jquery如何给某个类元素增加点击事件
    本篇内容介绍了“jquery如何给某个类元素增加点击事件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作