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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
网上抓的一个特效
2007/05/11 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
用Python编写web API的教程
2015/04/30 Python
python冒泡排序简单实现方法
2015/07/09 Python
分析Python读取文件时的路径问题
2018/02/11 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
工作会议欢迎词
2014/01/16 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python