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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
js 调用百度分享功能
Feb 27 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
浅析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
php实现快速排序法函数代码
2012/08/27 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
html读出文本文件内容
2007/01/22 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python del()函数用法
2013/03/24 Python
Python描述器descriptor详解
2015/02/03 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python使用PyQt5的简单方法
2019/02/27 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python enumerate内置库用法解析
2020/02/24 Python
python实现3D地图可视化
2020/03/25 Python
Python requests模块session代码实例
2020/04/14 Python
Django之腾讯云短信的实现
2020/06/12 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
采购员岗位职责
2013/11/15 职场文书
机关财务管理制度
2014/01/17 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
工程售后服务方案
2014/06/08 职场文书
六查六看剖析材料
2014/10/06 职场文书
辩护词格式
2015/05/22 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL