Vue.2.0.5实现Class 与 Style 绑定的实例


Posted in Javascript onJune 20, 2017

Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象,以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外, v-bind:class 指令可以与普通的 class 属性共存。如下模板:

<div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如下 data:

data: {
 isActive: true,
 hasError: false
}

渲染为:

<div class="static active"></div>

当 isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError的值为 true , class列表将变为 "static active text-danger"。

你也可以直接绑定数据里的一个对象:

<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',
  }
 }
}

数组语法

我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:

<div v-bind:class="[activeClass, errorClass]">
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class ,可以用三元表达式:

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始终添加 errorClass ,但是只有在 isActive 是 true 时添加 activeClass 。

不过,当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法:

<div v-bind:class="[{ active: isActive }, errorClass]">

With Components

This section assumes knowledge ofVue Components. Feel free to skip it and come back later.

When you use the class attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.

For example, if you declare this component:

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

Then add some classes when using it:

<my-component class="baz boo"></my-component>

The rendered HTML will be:

<p class="foo bar baz boo">Hi</p>

The same is true for class bindings:

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive is truthy, the rendered HTML will be:

<div class="foo bar active"></div>

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS ,其实它是一个 JavaScript 对象。 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]">

自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
JS中的三个循环小结
Jun 20 #Javascript
详解Vue 方法与事件处理器
Jun 20 #Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 #Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
vue之数据交互实例代码
Jun 20 #Javascript
jquery加载单文件vue组件的方法
Jun 20 #jQuery
You might like
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python实现单词拼写检查
2015/04/25 Python
python模块smtplib学习
2018/05/22 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
详解python中的异常和文件读写
2021/01/03 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2015年国庆节寄语
2015/08/17 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
Windows7下FTP搭建图文教程
2022/08/05 Servers
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js