Vue 中动态添加class(使用v-bind:class)

今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以后查看。

  1. 用法一: 参考:
    1. HTML示例: //将下面nav_datas数组中的数据给渲染出来,并利用nav_datas中的class_true的boolean值来表示该元素类名是否存在 <template> <div> <ul> <li v-for="(nav_data,index) in nav_datas" :key="index" :class="{'nav_select_selected':nav_data.class_true}">{{nav_data.name}}</li> </ul> </div> </template>
    2. selected CSS样式示例: .nav_select_selected{ border-bottom: 3px solid #4b9fd5; }
    3. JavaScript示例: <script> export default { data(){ return { //渲染数据的数组 nav_datas:[ {class_true:false,name:'test1'}, {class_true:false,name:'test2'}, {class_true:false,name:'test3'}, {class_true:false,name:'test4'}, {class_true:false,name:'test5'}, ] } }, methods:{ }, mounted(){ //这里的数字可以换成 0~this.nav_datas.length 之间任意的数字 this.nav_datas[0].class_true = true } } </script>
  2. 关于动态绑定类名和样式还有几种用法,详情请见:https://cn.vuejs.org/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95

我在解决问题过程中参考了这篇文章:vue中v-bind:class动态添加class

如需转载,请注明出处

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

Vue.js基础特性

计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可

1521
来自专栏超然的博客

react入门——慕课网笔记

  1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性

1042
来自专栏极客生活

数据分析Excel技能之自动填充

将光标移动到选中的单元格的右下角的那个节点上光标会变成实心加号。然后可以上下左右拖动光标就会自动填充当前单元格中的内容。 根据当前单元格中的内容格式不同,ex...

1093
来自专栏别先生

jQuery/javascript实现网页注册的表单验证

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <...

2656
来自专栏Google Dart

AngularDart 4.0 高级-结构指令 顶

本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己的结构指令来完成相同的操作。

1392
来自专栏coder修行路

Go基础--终端操作和文件操作

终端操作 操作终端相关的文件句柄常量 os.Stdin:标准输入 os.Stdout:标准输出 os.Stderr:标准错误输出 关于终端操作的代码例子: pa...

3006
来自专栏PHP在线

jQuery学习笔记

jQuery大部分功能需要根据文档的DOM模型来工作,首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。

1122
来自专栏Golang语言社区

厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素

slice中文可以称为“切片”。是Go语言为处理同类型数据序列提供的一个高效且方便的方式。是在数组上抽象的一个数据类型。 切片的使用相当的广泛。 切片可以直接赋...

3897
来自专栏web前端教室

[视频直播]本周日先行者视频“React多级菜单

第一个知识点,就是递归。 递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。 看一小段JSON: { ...

2279
来自专栏柠檬先生

Angularjs基础(十一)

ng-csp       描述:修改内容的安全策略       实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;         ...

2665

扫码关注云+社区

领取腾讯云代金券