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 相关文章推荐
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python搜索算法原理及实例讲解
2020/11/18 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
个人应聘自我评价分享
2013/11/18 职场文书
自我评价范文点评
2013/12/04 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
我的画教学反思
2014/04/28 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
家长通知书家长意见
2014/12/30 职场文书
民主生活会意见
2015/06/05 职场文书
教师节领导致辞
2015/07/29 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
对讲机知识
2022/04/07 无线电