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 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
PHP7 新特性详细介绍
2016/09/06 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
《我要的是葫芦》教学反思
2014/02/23 职场文书
项目建议书怎么写
2014/05/15 职场文书
学校火灾防控方案
2014/06/09 职场文书
公司2014年度工作总结
2014/12/10 职场文书
合作与交流自我评价
2015/03/09 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Python实现视频自动打码的示例代码
2022/04/08 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL