vue绑定class与行间样式style详解


Posted in Javascript onAugust 16, 2017

一、绑定class属性的方式

1、通过数组的方式,为元素绑定多个class

<style>
  .red {
    color:red;
    /*color:#ff8800;*/
  }
  .bg {
    background: #000;
    /*background: green;*/
  }
  </style>


  window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
        red_color : 'red',
        bg_color : 'bg'
      }
    });
  }



  <div id="box">
    <span :class="[red_color,bg_color]">this is a test string</span>
  </div>

上例为span 绑定2个class,通过设定red_color和bg_color的值,找到对应的class类名

2、通过控制class的true或者false,来使用对应的class类名, true: 使用该class,  false: 不使用该class

<style>
  .red {
    color:red;
  }
  .bg {
    background: #000;
  }
  </style>

  window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
      }
    });
  }
  
  <div id="box">
    <span :class="{red:true,bg:true}">this is a test     string</span>
  </div>

3、这种方式,跟第二种差不多,只不过是把class的状态true/false用变量来代替

<style>
  .red {
    color:red;
  }
  .bg {
    background: #000;
  }
  </style>

  window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
        r : true,
        b : false
      }
    });
  }

  <div id="box">
    <span :class="{red:r,bg:b}">this is a test string</span>
  </div>

4、为class属性绑定整个json对象

<style>
  .red {
    color:red;
  }
  .bg {
    background: #000;
  }
  </style>

  window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
        json : {
          red : true,
          bg : false
        }
      }
    });
  }


  <div id="box">
    <span :class="json">this is a test string</span>
  </div>

 二、绑定style行间样式的多种方式

1、使用json格式,直接在行间写

window.onload = function(){
    var c = new Vue({
      el : '#box',
    });
  }

   <div id="box">
    <span :style="{color:'red',background:'#000'}">this is a test string</span>
  </div>

2、把data中的对象,作为数组的某一项,绑定到style

window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
        c : {
          color : 'green'
        }
      }
    });
  }

  <div id="box">
    <span :style="[c]">this is a test string</span>
  </div>

3、跟上面的方式差不多,只不过是为数组设置了多个对象

window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
        c : {
          color : 'green'
        },
        b : {
          background : '#ff8800'
        }
      }
    });
  }
<div id="box">
     <span :style="[c,b]">this is a test string</span>
  </div>

4、直接把data中的某个对象,绑定到style

window.onload = function(){
    var c = new Vue({
      el : '#box',
      data : {
        a : {
          color:'yellow',
          background : '#000'
        }
      }
    });
  }
<div id="box">
     <span :style="a">this is a test string</span>
</div>

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

Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JavaScript Array对象详解
Mar 01 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
详解Vite的新体验
Feb 22 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue的MVVM实现方法
Aug 16 #Javascript
利用JS制作万年历的方法
Aug 16 #Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 #Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 #Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 #Javascript
微信小程序删除处理详解
Aug 16 #Javascript
You might like
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python比较两个列表大小的方法
2015/07/11 Python
图文详解WinPE下安装Python
2016/05/17 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
记帐员岗位责任制
2014/02/08 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书