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 相关文章推荐
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
完美的js图片轮换效果
Feb 05 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue生命周期实例小结
Aug 15 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
基于mysql的bbs设计(三)
2006/10/09 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
详解JavaScript树结构
2017/01/09 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
微信小程序block的使用教程
2018/04/01 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详细探究Python中的字典容器
2015/04/14 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python上下文管理器全实例详解
2019/11/12 Python
会计专业大学生职业生涯规划书
2014/02/11 职场文书
中文教师求职信
2014/02/22 职场文书
班主任寄语大全
2014/04/04 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
投资合作意向书范本
2015/05/08 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技