vue中如何给dom添加类名

最新推荐文章于 2024-05-16 10:31:53 发布
最新推荐文章于 2024-05-16 10:31:53 发布
阅读量1w 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxskr/article/details/92842097
版权
  1. 直接在dom上绑定类名
  2. vue中类名绑定 - 对象形式
    目的： dom身上属性class 要和 数据绑定
    解决：v-bind
    数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

size是自定义的属性， 它的属性值是undefined， 相当于是false

size也是自定义属性，他的属性是true,那么就会加上去

格式： v-bind:class = "{ 属性： boolean }" 格式： v-bind:class = "{ [data]： boolean }"

  1. vue中类名绑定的形式 - 数组的形式 【 推荐 】
    格式： v-bind:class = “[ 数据 ]”

  2. 类名绑定不会覆盖原先的类名

  3. 为什么要绑定类名
    指令是用来操作dom
    目的： 为了将来通过数据来操作类名，类名操作dom

yxskr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue封装dom添加类名方法
qq_42082860的博客
02-02 2158
如何封装 // 判断dom中是否含有某个类名 // el 需要判断的dom元素 // className 需要判断的类名 export function hasClass (el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el.className) ...
vue中动态添加class类名的方法
10-18
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue里实现点击获取当前元素并新增class类
weixin_41284657的博客
03-20 6172
需求 点击icon后，icon变为灰色 解决思路 点击icon后，获取当前dom，增加visited类 css里visited类加样式 代码 1、点击事件传参数 $event <a-tooltip> <template #title>显示详情</template> <a><a-icon type="idcard" @click="showAnalyze(record, $event)"/></a> </a-tool
vue项目中使用ref来获取dom及给class绑定属性的命名注意事项
热门推荐
如影随风
06-04 2万+
使用ref来获取dom的时候，在给ref命名的时候尽量使用驼峰命名法，不能使用'-'（像‘auto-play’这样的命名就是错误的，应该改为'autoPlay'这样）；而在给class绑定属性的时候，也应该避免使用'-'。例如，  :class="{audit-btn:isBtn}" 是错误的，正确的写法是:class="{auditBtn:isBtn}"...
vue 中修改contenteditable=“true” 属性 ， vue中给dom 元素 添加 contenteditable属性(1)
最新发布
java_dazhuzhu的博客
05-16 470
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
vue, js 传递自身DOM元素，并添加class名称
qq_38192709的博客
11-24 3865
vue, js 传递自身DOM元素，并添加class名称 element.classList.add('yourClass') 具体VUE示例如下： 1： vue 元素传递了本身 <p class="answer" @click.once="chooseFn($event.target)">{{ item.item1 }}</p> 2： vue 方法处理该元素，并添加 class名称 chooseFn: function (ele) { ele.classList.add
vue获取DOM元素并设置属性
weixin_34352449的博客
09-27 2493
这里我想到了2个方法： 方法一： 直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式 方法二： 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素   注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空， 　　   如果是给子组件加id并修改自定义属性，则直接会...
Vue中动态添加类名
Waghhhh的博客
09-23 1182
在遇到有小菜单的切换需求时，例如 菜单代码类似 <div class="options"> <ul> <li>东环校区</li> <li>柳东校区</li> <li>柳石校区</li> </ul> </div> 在JavaScri.
vue如何判断dom的class
08-27
主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件，具体内容详情大家参考下本
基于vue中的scoped坑点解说
10-14
当我们在单文件组件（Single File Component, SFC）的`<style>`标签中使用`scoped`时，Vue会自动为组件的DOM元素添加一个唯一的`data`属性，如`data-v-xxxxx`，然后在CSS选择器后面添加这个属性，以确保样式只作用于...
vue操作dom元素的3种方法示例
01-22
1.原生js操作dom const dom = getElementById(‘box') 2.vue官方方法：ref vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到 .set是我们要操作的dom对象，它的ref是 up @click=“Alert” 给父元素一个点击事件， 接下来我们来编写这个方法 methods:{   this.$refs.addAlert.style.display = “block”; } CSS还要吗？ 那我把代码全粘过来你们自己看吧 <te
Vue2.0点击切换类名改变样式的方法
10-18
今天小编就为大家分享一篇Vue2.0点击切换类名改变样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中jsx不完全应用指南小结
10-16
Vue中的JSX是一种用于在Vue组件内部编写类似React的JSX语法，允许我们在JavaScript中构建DOM树。在Vue中，通常我们使用模板语法编写视图，但当遇到复杂逻辑或需要更灵活的DOM构造时，JSX能提供帮助。本文将深入探讨...
浅谈vue中慎用style的scoped属性
01-21
在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，这是一个非常好的举措，但是为什么要慎用呢？因为在我们需要修改公共组件（三方库或者...
【vue小知识】给DOM元素动态的添加上一个类||v-bind的妙用
嗨，朋友你好！我是前端领域的工作者
06-26 1843
vue中给DOM元素动态的加上一个/多个类。v-bind的妙用；
vue获取dom元素与修改样式详解
dreamStart_Lin的博客
10-30 6648
vue中如何获取dom元素呢？ 步骤详解 在标签上加上ref属性 如 ： 在js中通过refs便可以获取dom如：this.refs便可以获取dom 如：this.refs便可以获取dom如：this.refs.refDemo 修改对应的样式名 如：this.$refs.refDemo.style.backgroundColor="#108ee9" 还不会？ 请看代码例子 <tem...
Vue中添加class类名的方法
赵小准的博客
05-30 1万+
Vue添加class类名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
vue中导航项点击添加样式类名
qq_45894929的博客
11-04 1120
效果:点击导航项字体变颜色,底部添加横线 1.主要通过isActive来判断是哪一个导航页 2.还有一个问题是只要刷新页面都会跳转到首页,是因为标签a有跳转,要阻止a标签的默认跳转,href="javascript:void(0)这样也能实现 <li><a href="javascript:;" :class="isActive=='首页' ? 'isActive':''" @click="toggle()"> 恵牧首页</a><i :class="isActi
vue3获取多个同名dom元素 不用v-for 并且添加类名
05-31
可以使用 Vue 3 的 `ref` 和 `querySelectorAll` 方法来获取多个同名的 DOM 元素，并且添加类名。具体步骤如下： 1. 在模板中，给需要获取的 DOM 元素添加 `ref` 属性： ```html <div ref="myDiv"></div> <div ref="myDiv"></div> <div ref="myDiv"></div> ``` 2. 在组件中，使用 `$refs` 属性和 `querySelectorAll` 方法来获取多个同名的 DOM 元素： ```javascript import { ref } from 'vue'; export default { setup() { const myDivs = ref(null); const addClassName = () => { const divs = myDivs.value.querySelectorAll('[ref="myDiv"]'); divs.forEach(div => { div.classList.add('my-class'); }); }; return { myDivs, addClassName }; } }; ``` 3. 在需要的时候，调用 `addClassName` 方法来给多个同名的 DOM 元素添加类名： ```html <button @click="addClassName">Add Class Name</button> ``` 这样，就可以在不使用 `v-for` 的情况下，获取多个同名的 DOM 元素，并且给它们添加类名了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值