Vue的Class与Style绑定的方法


Posted in Javascript onSeptember 01, 2017

本文介绍了Vue的Class与Style绑定,分享给大家,具体如下:

绑定 HTML Class

对象语法

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

<style>
  .exp{
    border: 1px solid #ccc;
  }
  .forExp{
    background: blue;
  }
</style>
<div class="exp" v-bind:class="{newExp:isNewExp}"></div>
<script>
  var exp=new Vue({
    el:".exp".
    data:{
      isForExp:false
    }
  })
</script>

如上,我们先给 .exp 一个边框,我们利用 v-bind 方法传入一个新的 class 属性 .newExp,设置一个蓝色的背景颜色。当我们在控制台修改 .newExp 的属性为 true 时,会给 div 添加一个蓝色的背景颜色。

我们也可以传入更多的属性来切换多个 class 。

<div class="exp" v-bind:class="{newExp:isExp,npc:isNpc}"></div>
<script>
  data:{
    isExp:false,
    isNpc:true
  }
</script>

在模板里的渲染结果为:

<div class="exp isNpc"></div>

我们也可以使用对象的方法来切换属性

<div class="exp" v-bind:class="obj"></div>
<script>
  data:{
    obj:{
      newExp:false,
      npc:true
    }
  }
</script>

渲染结果和上面的一样

数组语法

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

<div class="exp" v-bind:class="[newExp,oldExp]"></div>
<script>
  data:{
    newExp:"new",
    oldExp:"old"
  }
</script>

渲染为:

<div class="exp new old"></div>

要切换class,使用三元运算符:

<div class="exp" v-bind:class="[act? newExp:oldExp]"></div>
<script>
  data{
    newExp:"new",
    oldExp:"old",
    act:true
  }
<script>

act 为 true 时,添加 new ,为 false 时添加 old。

用在组件上

声明一个组件:

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

然后在使用它的时候添加一些 class:

<my class="tip"></my>

最终渲染为

<p class="foo bar tip">Hi</p>

同样的适用于绑定 HTML class:

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

当active为true时,HTML 将被渲染成为:

<p class="foo bar active">Hi</p>

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
  data:{
    activeColor:"blue",
    fontSize:20
  }
</script>

使用对象语法的话,会看起来更加清晰

<div v-bind:style="obj"></div>
<script>
  data:{
    obj:{
      color:"#FFF",
      fontSize:"20px"
    }
  }
</script>

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:

<div v-bind:style="[style1,style2]"></div>
<script>
  data:{
    style1:{
      color:"#666"
    },
    style2:{
      background:"#b1b1b1"
    }
  }
</script>

自动添加前缀

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

Chrome 和 Safari : -webkit-
IE :        -ms-
Firfox :      -moz-
Opera :      -o-

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

Javascript 相关文章推荐
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 #Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 #Javascript
Angularjs实现上传图片预览功能
Sep 01 #Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 #Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 #Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 #Javascript
You might like
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP解决中文乱码
2017/04/28 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
许愿墙中用到的函数
2006/10/07 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
如何清空python的变量
2020/07/05 Python
详解python中的闭包
2020/09/07 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
迎接领导欢迎词
2014/01/11 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
施工安全保证书
2015/05/09 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python