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 相关文章推荐
javascript从image转换为base64位编码的String
Jul 29 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
小程序实现筛子抽奖
May 26 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访问数组最后一个元素的函数end()用法
2015/03/18 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
js的event详解。
2006/09/06 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python+pandas分析nginx日志的实例
2018/04/28 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python函数返回不定数量的值方法
2019/01/22 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
周年庆典主持词
2014/04/02 职场文书
新手上路标语
2014/06/20 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
民族精神月活动总结
2014/08/28 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
《花钟》教学反思
2016/02/17 职场文书