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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
初识Node.js
Sep 03 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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实现的四则运算表达式计算实现代码
2011/08/02 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
Node.js编码规范
2014/07/14 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
几种tab切换详解
2017/02/03 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
JavaScript实现时间表动态效果
2017/07/15 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
使用python绘制常用的图表
2016/08/27 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
先进个人获奖感言
2014/01/24 职场文书
经典促销广告词大全
2014/03/19 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
2019暑假学生安全口号
2019/06/27 职场文书