vue判断点击元素是否有指定class

vue判断点击元素是否有指定class

<div class="ku-menu-item-group active"  @click="clickFold"></div>
 clickFold: function (e) {
        e = e || window.event;
        let isActive = e.currentTarget.getAttribute("class").includes("active");
        console.log("isActive----------------",isActive);
 }
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中,可以使用以下方式来判断一个元素是否指定class 并改变 img 图片地址: 1. 使用对象方式绑定 class对象属性名是类名,属性值是一个表达式,该表达式的值为 true 或 false,如果该表达式的值为 true,则该元素会添加该类,否则不添加。 例如,判断一个元素是否有名为 "isActive" 的类,并根据其值来改变 img 图片地址: ``` <template> <div :class="{ isActive: hasActiveClass }"> <img :src="imageUrl" /> </div> </template> <script> export default { data() { return { hasActiveClass: true, imageUrl: 'https://example.com/image1.jpg' } }, methods: { changeImageUrl() { if (this.hasActiveClass) { this.imageUrl = 'https://example.com/image2.jpg' } else { this.imageUrl = 'https://example.com/image1.jpg' } } } } </script> ``` 其中,hasActiveClass 是一个在 Vue 实例中的 data 中定义的布尔值,如果它的值为 true,则该元素会添加 "isActive" 类。 当 hasActiveClass 的值改变时,可以调用 changeImageUrl 方法来改变 img 的图片地址。 2. 使用 ref 和 $el.classList.contains() 方法判断一个元素是否包含指定的类,并根据其值来改变 img 图片地址。 例如,判断一个元素是否有名为 "isActive" 的类,并根据其值来改变 img 图片地址: ``` <template> <div ref="myDiv"> <img :src="imageUrl" /> </div> </template> <script> export default { mounted() { if (this.$refs.myDiv.classList.contains('isActive')) { this.imageUrl = 'https://example.com/image2.jpg' } else { this.imageUrl = 'https://example.com/image1.jpg' } }, data() { return { imageUrl: 'https://example.com/image1.jpg' } } } </script> ``` 其中,this.$refs.myDiv 表示一个指向该元素的引用,可以使用 $el 属性来访问该元素的 DOM 对象。当该元素的类名发生变化时,可以通过重新调用 mounted 方法来判断元素是否包含指定的类并根据其值来改变 img 的图片地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值