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中没有函数重载的概念
Jun 03 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
基于JavaScript实现控制下拉列表
May 08 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
用header 发送cookie的php代码
2007/03/16 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
php反射应用示例
2014/02/25 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Python pickle模块用法实例
2015/04/14 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
一文读懂Python 枚举
2020/08/25 Python
python实现图片转字符画
2021/02/19 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
建材业务员岗位职责
2013/12/08 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
婚前协议书范本
2014/04/15 职场文书
护士感人事迹
2014/05/01 职场文书
合作经营协议书范本
2014/09/16 职场文书
会议接待欢迎标语
2014/10/08 职场文书
就业意向协议书
2015/01/29 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS