vue.js绑定class和style样式(6)


Posted in Javascript onDecember 09, 2016

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

通过 v-bind:class 或者 :class 来为style或者class来绑定

绑定class

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      isActive:true,
      isCc:false
    },
  });

或者下面的代码也可以实现

<div class="test">
    <div :class=classObject></div>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

通过过数组将class绑定

<div class="test">
    <div :class="[activeClass,error]">dsdsd</div>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      activeClass:"active",
      error:"ddd"
    },
  });

绑定style属性

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      styleObject:{
       color: "red",
        fontSize: "30px"
      }
    },
  });

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

Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
浅谈jquery事件处理
Apr 24 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 #Javascript
JS定时器实现数值从0到10来回变化
Dec 09 #Javascript
原生js实现查询天气小应用
Dec 09 #Javascript
JS实现太极旋转思路分析
Dec 09 #Javascript
学习使用bootstrap的modal和carousel
Dec 09 #Javascript
PHP+jquery+ajax实现分页
Dec 09 #Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
学习php笔记 字符串处理
2010/10/19 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
基于python 字符编码的理解
2017/09/02 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
如何验证python安装成功
2020/07/06 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
机械绘图员岗位职责
2013/11/19 职场文书
副总经理工作职责
2013/11/28 职场文书
大学生村官任职感言
2014/01/09 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL