vue改变class内的属性_vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind /：...
一、添加class
.red{color: skyblue;}
.thin{font-weight: 200;}
.italic{font-style: italic;}
.active{letter-spacing: 0.5em}
1.第一种使用方式，直接传递一个数组，注意的 class需要使用 v-bind 做数据绑定
eg:
H1标签！！！
2.在数组中使用三元表达式
eg:
H1标签！！！
3.在数组中使用 对象来代替三元表达式，提高代码的可读性
H1标签！！！
4.在为class使用v-bind 绑定 对象的时候，对象的属性是类名，由于对象的额属性可带引号，也可以不带引号；属性的值是一个标识符
(1).
H1标签！！！
(2).
H1标签！！！
var vm = new Vue({
el:'#app',
data:{
msg:'点击事件',
flag:false,
classObj:{red:true,thin:true,italic:true,active:true}
},
methods:{
}
});
二、添加style
1.直接在元素上通过:style的形式，书写样式对象
h1标签
2.将样式对象定义到data中，并直接引用到：style
h1标签
3.在：style中通过数组，引用多个data上的样式对象
h1标签
//创建Vue实例
var vm = new Vue({
el:'#app',
data:{
styleobj:{color:'red','font-weight':200},
styleobj2:{'font-style':'italic'}
},
methods:{}
})
vue改变class内的属性_vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind /：...相关推荐
- vue改变class内的属性_vue绑定html的class属性的方法
一.对象语法绑定class属性 class的属性代码如下 .red{ color: red; width: 100px; height: 100px; border: 2px; border-colo ...
- vue子组件mounted不执行_vue 路由子组件created和mounted不起作用的解决方法
vue 路由子组件created和mounted不起作用的解决方法 判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) 使用v-if判断(成功解决) 可以 ...
- vue设置img大小的属性_Vue.js自定义标签属性并获取属性，及绑定img的src属性的坑...
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如 H1标 ...
- vue的路由怎么换端口_vue.js如何更改默认端口号8080为指定端口的方法
本文介绍了vue.js如何更改默认端口号8080为指定端口,分享给大家,希望此文章对各位有所帮助. 执行npm run dev实际是在调用根目录下的package.json 打开package.jso ...
- vue 跳转页面带对象_vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法 1:router-link跳转 点击跳转2 点击跳转1 点击跳转3 2:this.$router.push() 点击跳转4 export default{ name:'t ...
- 一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
- vue基础小节 v-mode属性双向绑定 跑马灯 十秒挑战 计算器 v-for和key属性 v-if与v-show用法区别 tap切换
vue代码基本结构 <!-- 视图层 --><div class="app"><!-- 差值表达式 --><div>{{mge}} ...
- Vue第一部分(3)：事件绑定与标签属性赋值
1.事件绑定:v-on指令 基本使用 在Vue中通过 v-on 指令给页面元素绑定事件. 语法: v-on:事件名="js代码片段或函数" //事件名=事件属性-on 比如:cl ...
- Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...
最新文章
- AWS S3宕机的启发: 云必须分散化
- 浅说--未将对象引用设置到对象的实例(System.NullReferenceException)
- VS-code中的Postman替代品
- Ambari2.7.0 + HDP3.1.4.0安装,hdfs数据备份和恢复，hive数据备份和恢复，hbase数据备份和恢复,常见错误总结，Ambari卸载，hadoop-ha,hive和ES整合
- c++ 该使用类内初始值么？
- 拓端tecdat|python在Scikit-learn中用决策树和随机森林预测NBA获胜者
- 【FFmpeg命令】jpg与yuv（批量）互转
- Python----chardet模块的使用方法
- python应该怎么样自学_Python该如何自学？
- shell脚本：介绍、语法、运算、流程控制、对文件/输出流处理、案例
- com组件 的劫持_IE首页被劫持跳转问题的解决方案
- 网络安全与渗透：文件上传漏洞，一文详解（十）此生无悔入华夏，男儿何不带吴钩
- VIM自动命令(autocmd)
- Win10 1809 PowerShell美化教程
- （十九）深入理解蓝牙BLE之“低功耗蓝牙dongle”
- c语言int型数组长度求法及测试
- 两个小可爱的结对作业（司佳宇，雷镓）
- SQL Server之查询检索操作
- win10任务栏显示“中/英“语言标识
- 深度解读：小红书热搜词底层逻辑，助力小红书笔记上热门