vue从入门到进阶:Class 与 Style 绑定(四)
绑定 HTML Class
对象语法
①.添加单个class:
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active
这个 class
存在与否将取决于数据属性 isActive
为真还是假。
②.添加多个class:
<div class="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
和如下 data:
data: {isActive: true,hasError: false }
结果渲染为:
<div class="static active"></div>
③.绑定的数据对象不必内联定义在模板里:
<div v-bind:class="classObject"></div>data: {classObject: {active: true,'text-danger': false} }
④.绑定一个返回对象的计算属性:
<div v-bind:class="classObject"></div>data: {isActive: true,error: null }, computed: {classObject: function () {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}} }
数组语法
①.
<div v-bind:class="[activeClass, errorClass]"></div>data: {activeClass: 'active',errorClass: 'text-danger' }
渲染为:
<div class="active text-danger"></div>
②.如果你也想根据条件切换列表中的 class,可以用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass
,但是只有在 isActive
是true
时才添加 activeClass
。
③.在数组语法中也可以使用对象语法:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
用在组件上
当在一个自定义组件上使用 class
属性时,这些类将被添加到该组件的根元素上面
。这个元素上已经存在的类不会被覆盖。
如下,你声明了这个组件:
Vue.component('my-component', {template: '<p class="foo bar">Hi</p>' })
然后在使用它的时候添加一些 class
:
<my-component class="baz boo"></my-component>
HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class
也同样适用:
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive
为 true
时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
绑定内联样式style
对象语法
CSS 属性名可以用驼峰式
(camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来
) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {activeColor: 'red',fontSize: 30 }
直接绑定到一个样式对象通常更好,这会让模板更清晰:
<div v-bind:style="styleObject"></div>data: {styleObject: {color: 'red',fontSize: '13px'} }
同样的,对象语法常常结合返回对象的计算属性使用。
数组语法
v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
自动添加前缀
当 v-bind:style
使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform
,Vue.js 会自动侦测并添加相应的前缀。
多重值
从 2.3.0
起你可以为 style
绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox
,那么就只会渲染 display: flex
。
转载于:https://www.cnblogs.com/moqiutao/p/8328576.html
vue从入门到进阶:Class 与 Style 绑定(四)相关推荐
- Vue 从入门到进阶之路(十四)
之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- vue入门:(class与style绑定)
对象语法 数组语法 一.对象语法 1.1对象语法绑定HTML Class 语法:v-bind:class="{'className1':boolean1,'className2':boole ...
- vue从入门到进阶:指令与事件(二)
一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...
- vue从入门到进阶:Vuex状态管理(十)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
- vue从入门到进阶:简介(一)
前言 用了这么久的vue了,但是一直没有时间写个系列文章,现在抽一定时间总结下vue的知识点. 首先,Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript ...
- web前端高级React - React从入门到进阶之Render Props
第二部分:React进阶 系列文章目录 第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介 第三章:React从入门到进阶之元素渲染 第四章:React从入门到 ...
- web前端高级React - React从入门到进阶之React条件渲染
系列文章目录 第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介 第三章:React从入门到进阶之元素渲染 第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
- web前端高级React - React从入门到进阶之初识React
第一部分:React入门 系列文章目录 第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介 第三章:React从入门到进阶之元素渲染 第四章:React从入门到 ...
最新文章
- mysql中utf8_bin、utf8_general_ci、utf8_general_cs编码区别
- linux wget命令详解
- 你真的了解JavaScript的比较运算符(==,!=,===,!===,=,=,,)吗?
- 【COCOS CREATOR 系列教程之二】脚本开发篇事件监听、常用函数等示例整合
- html5与跨平台开发,HTML5应用与跨平台应用开发
- java类只读怎么办_如何在Java中制作一个只读类?
- 阿里巴巴Dubbo实现的源码分析
- JAVA分析命令:jps、jstack、jmap、jhat
- 抖音音乐品牌升级 推出“炙热星河”音乐人服务平台
- 用u盘如何安装linux系统,详细教您如何使用u盘安装Linux系统
- Dual Thrust 商品期货 (注释版)
- 微信小程序(沧海一笑)
- YOLOv5桌面应用开发,手把手教学实操(上)——附源代码
- 不使用羊角曲线绘制G2圆角
- nginx服务器中url重写rewrite参数和例子
- 《第一堂棒球课》:王牌捕手·棒球2号位
- 短信与社交app的好处
- 用Python将excel表格按照列拆分为多个表格
- Python里的%s和%d是什么意思
- android开发查漏补缺图
热门文章
- python将对象放入列表根据某个属性排升序_python实现对象列表根据某个属性排序的方法详解...
- dataimagepng php_PHP decode data:image/png;base64
- android html模板下载地址,Android HTML模板
- python类中包含一个特殊的变量、它表示当前对象自身_知到APP教师职场礼仪第七单元章节测试网课答案大学课后答案...
- python读取配置文件 分段_python配置文件读取
- asm扩容流程_AIX之ASM存储扩容
- linux基本命令示例_Linux mv命令用法和示例
- Java FileWriter示例
- viewtype_Android RecyclerView示例–多个ViewType
- Akka的Actor层级结构《seven》译