Vue-Class 与 Style 绑定
前言
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
官网地址:https://cn.vuejs.org/v2/guide/class-and-style.html
一、 Class官方语法及案例(html class)
我们可以传给 v-bind:class 一个对象,以动态地切换 class 语法:
官方语法:
单个:
<div v-bind:class="{ active: isActive }"></div>
多个:
<divclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
解析:
单个:
<div v-bind:class="{ clss对象: boolean类型}"></div>
多个:
<divclass="static"v-bind:class="{ clss对象: boolean类型, clss对象: boolean类型 }">
</div>
案例
需求:
当我点击目录时字体颜色也会跟着改变
index.vue
<li @click="directoryIdentifierClick('device')" v-if="isShowDevice"><router-link to="/home/device"><div><span class="nav-bottom-span nav-img"><img :src='deviceImgUrl'></span><span class="nav-bottom-span" v-bind:class="{clickDirectory: this.fontColor === 'device'}">设备</span></div></router-link>
</li><li @click="directoryIdentifierClick('user')" v-if="isShowUser"><router-link to="/home/user"><div><span class="nav-bottom-span nav-img"><img :src='userImgUrl'></span><span class="nav-bottom-span" v-bind:class="{clickDirectory: this.fontColor === 'user'}">我的</span></div></router-link></li>
directoryIdentifierClick 点击事件
v-bind:class="{clickDirectory: this.fontColor === ‘device’}" 当 this.fontColor 等于 device 就显示样式,user也一样
class
.clickDirectory {// 字体变为橙色color: #fe7d2d;
}
data
data () {return {fontColor: 'user'}}
methods
methods: {// 目录点击事件directoryIdentifierClick (directory) {// 点击谁,我就让 fontColor 等于它this.fontColor = directory}}
beforeUpdate
// 钩子事件(触发机制:数据修改时)
beforeUpdate: function () {}
渲染结果
二、 style官方语法及案例(绑定内联样式)
官方语法
v-bind:style 的对象语法类似 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
解析
<div v-bind:style="{ 属性: 值, 属性: 值}"></div>
<div v-bind:style="{ 类似一个map(k,value) }"></div>
案例
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello Vue</div>
data: {activeColor: 'red',fontSize: 30
}
总结
大概简述了用法,官网的各种用法更加详细,若不懂的可以去官网查看
官网地址:https://cn.vuejs.org/v2/guide/class-and-style.html
Vue-Class 与 Style 绑定相关推荐
- 6.Vue Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易 ...
- vue Class 与 Style 绑定
1. Class 绑定 1.1 对象语法 普通对象 单个类 <div v-bind:class="{ active: isActive }"></div> ...
- vue class与style绑定
介绍 元素的class和style属于attribute,所以可以用v-bind处理.而在v-bind用于classhestyle时,vue.js专门增强了一下,接受的表达式结果除了字符串,还要数组和 ...
- Vue - class与style绑定
1.通过v-bind绑定一个class A:直接绑定 B:通过v-bind绑定一个对象 C:绑定一个返回对象的计算属性 D:绑定一个数组对象 2.绑定内联样式 A:直接子啊属性名上面绑定 B:绑定到一 ...
- Vue-关于内联样式style绑定
原本准备把style绑定和class绑定写在一起的,但我还是分开了,对class绑定不太清楚的伙伴也可以先去看看上篇Vue-关于class绑定(基础学习)_绍昆ya的博客-CSDN博客 关于内联样式s ...
- Vue.js Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- vue html绑定数组,VueJs Class 与 Style 绑定 数组语法
应用介绍 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因 ...
- vue清除绑定的class_vue 的 class 和 style 绑定的方法【05】
学习要点:1.绑定 class 2.绑定 style 本节课我们来开始学习 Vue 的 class 和 style 绑定的方法. 一.绑定 class 1. v-bind:class 不但可以设置 c ...
- Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
最新文章
- [JavaWeb基础] 007.Struts2的配置和简单使用
- c++ stack 的使用
- [AWDwR4] Iteration F4
- [攻防世界][CTF][2020][MISC] 攻防世界 MISC writeup
- nb模块不能接收公网消息_物联网连接技术之NB-IOT无线技术介绍
- 数组常见异常 学习笔记
- 原理图转换为电路图时管脚不匹配的可能情况
- 比赛打分展示系统_《评委计分系统-双屏标准版》典型赛事案例图片展示-省直机关歌咏比赛
- python pandas series想赋予新的值_Python-pandas根据其他列的值创建新列/逐行应用多列的功能...
- 计算机软件系统验收标准,软件相关标准目录.xlsx
- 极米科技非“极客”:研发多年未掌握核心科技,还向竞品购买专利
- IE浏览器老是假死怎么办 IE假死的解决办法
- Linux系统接口ioc,Linux下SCSI API研究及应用
- mysql 插入缓冲_innodb insert buffer 插入缓冲区的理解
- 50 条有趣的 Python 一行代码
- 企业如何建立商业生态系统
- 算法大作业之津巴布韦问题的C语言实现
- redis windows版下载教程,及双系统百度网盘资源分享
- 【厚积薄发系列】C++项目总结19—组件化架构思想
- 关于报错FAILURE: Build failed with an exception.