vue改变class名字_vue动态绑定class名
1. 数据绑定
vue 指令以 v- 前缀标示，数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下：
博客园首页
简写：
博客园首页
2. 动态绑定class
vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量，可以通过 class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存，却可以与原生的class特性共存， 一个DOM标签中允许同时出现原生class和v-bind:class。
2.1 v-bind:class 支持string类型，不建议这样使用，因为string值是固定不变的，无法实现动态改变class的需求
HTML代码：
渲染后的HTML:
2.2 v-bind:class 支持数据变量，当变量值改变时，将同时更新class。v-bind:class指令的值限定为绑定表达式，如javascript表达式
HTML代码：
Javascript代码：
data: {
classA: 'class-a' //当classA改变时将更新class
}
渲染后的HTML:
写在指令中的值会被视作表达式，如javascript表达式，因此v-bind:class接受三目运算：
HTML代码：
渲染后的HTML:
2.3 v-bind:class 支持对象，对象改变时会动态更新class
HTML代码：
Javascript代码：
data: {
isA: false, //当isA改变时，将更新class
isB: true //当isB改变时，将更新class
}
渲染后的HTML:
HTML代码：
Javascript代码：
data: {
objectClass: {
class-a: true,
class-b: false
}
}
渲染后的HTML:
2.4: v-bind:class支持数组, 数组里的变量改变时，会动态更新class列表
HTML代码：
Javascript代码：
data: {
classA: 'class-a',
classB: 'class-b'
}
渲染后的HTML:
数组中可以包含object类型，数组中的object对象改变，也会更新class列表
HTML代码：
Javascript代码：
data: {
classA: 'class-a',
objectClass: {
classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表
classC: false, // classC值为false,将不添加classC
classD: true // classD 值为true，classC将被直接添加到class列表
}
}
渲染后的HTML:
vue改变class名字_vue动态绑定class名相关推荐
- vue改变class名字_vue中动态添加class类名的方法
vue 动态添加class类名,灵活得让你发狂,下面示例几个 动态添加类名 文字的颜色) 文字的颜色) 三元表示式(文字的颜色) 文字的颜色) 文字的颜色) 通过方法设置class类名 export ...
- vue改变标签属性_Vue用v-for给循环标签自身属性添加属性值的方法
我的代码结构如下所示不能执行,会出现报错 export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } ...
- 怎么改vue项目的标题_vue修改项目名
div自适应高度 div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: sublime 3 主题: Theme: Flatland 着色:todo Blue Dawn.tmThem ...
- vue data数据修改_Vue 超清晰思维导图（7张），详细知识点梳理！
Vue思维导图目录 MVC与MVVM的区别 Vue基本代码结构 Vue指令 Vue组件 class和style动态绑定 computed计算属性 EventBus filter过滤器方法 Vue是一套 ...
- 六逻辑层次 职业规划案例_我如何在六个月内改变职业并找到了一名开发人员...
六逻辑层次 职业规划案例 by Christian Jess Mark 克里斯蒂安·杰西·马克(Christian Jess Mark) 我如何在六个月内改变职业并找到了一名开发人员 (How I c ...
- python输入名字配对情侣网名_输入姓名配对情侣网名，情侣网名名字配对
提起输入姓名配对情侣网名,大家都知道,有人问打出自己的名字和对象的名字,就能匹配出情侣网名的网站!!!谁给我一个啊!,另外,还有人想问情侣名字配对甜甜的情侣网名,你知道这是怎么回事?其实情侣名字配对测 ...
- Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言 一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
- python输入名字配对情侣网名_定制情侣网名输入名字
5字经典情侣网名大全一对:感情的倔强 |执着的梦想 时光恋人i ♥ 时光爱人i毕竟你是光 ♥ 我无法独享祖国小嫩草 ♥ 祖国小花朵流年,残颜 &heartqq情侣网名 06-02|查看全文 在 ...
- 【前端】vue.js实现按钮的动态绑定
vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head><title>按钮绑定< ...
最新文章
- arm linux嵌入式网络控制系统,基于ARMLinux的嵌入式网络控制系统的研究与设计
- 用 Flask 来写个轻博客 (17) — MV(C)_应用蓝图来重构项目
- git：config命令
- 计算机科学课程体系核心内容,计算机科学教育的课程体系之研究
- 信息学奥赛C++语言：跑步
- linux-基本开发环境搭建
- 9-n个人中选k个人的选择方法种类
- jar包add to build path与放入lib下
- 海洋cms简洁免费下载视频网站正版原创自适应挖片模板
- SVN上库前检查（钩子程序）
- 为什么越受重视的游戏项目越难开发好！
- 汽车加油站问题(Java)
- 八爪鱼导出到mysql数据库_八爪鱼采集器怎么将数据导出数据库？
- 欢迎你、某某某同学python_python123第一周作业
- 【ZYNQ】petalinux包含自定义的动态库
- 计算机二级Python第二弹课后题来袭！冲冲冲！！！
- Rabbitmq 定时任务
- 业务+IT一体化就是BPO？
- 使用电子邮件营销可以更快速推广餐厅
- CSDN博客图片水印自定义及去除方法