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 相关文章推荐
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
玩转图像函数库―常见图形操作
2006/09/03 PHP
随机广告显示(PHP函数)
2006/10/09 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
js实现查询商品案例
2020/07/22 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Java及python正则表达式详解
2017/12/27 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Django models filter筛选条件详解
2020/03/16 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
StringBuilder和String的区别
2015/05/18 面试题
关于读书的演讲稿500字
2014/08/27 职场文书
公司转让协议书
2016/03/19 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang