class
    class的样式应用四种
    
    1.数组用法
        显示用标识符v-bind
        :class="['red','thin']"

2.三元表达式
        :class="[ture?'样式':'样式']"

3.数组中嵌套对象
        :class="[{'样式':ture}]"

4.直接使用对象
        :class="{red:ture}"

内联样式class使用
    同样先使用v-bind绑定
    注意使用带横杠的属性必须加上双引号
    1.:style="{color='red','background-color':'red'}"
        
    2.在data中定义样式
    :style="classobj"

例如data:{
            classobj:{color='red','background-color':'red'}
        }

3.在data中创建多个对象,在内联样式中指定一个数组来添加多个样式
        
    :style="[classobj,classobj2]"    
    例如data:{
            classobj:{color='red','background-color':'red'}
            
            classobj2:{'background-color':'red'}
        }

}

VUE添加class绑定的更多相关文章

  1. vue添加属性绑定

    html <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的 ...

  2. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  3. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  4. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  5. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  6. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  7. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  8. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  9. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

随机推荐

  1. Git初始化本地代码及提交到服务器

    2019独角兽企业重金招聘Python工程师标准>>> 1.先安装Git客户端 2.进入需要提交的文件夹目录 3.打开Git Bash,点击右键中的Git Bash 打开git命令窗 ...

  2. IBM Rational Rose软件下载以及全破解方法

    最近忙着作业,软件设计的类图着实难画,于是整理了rose的下载和破解方法 Rational Rose是Rational公司出品的一种面向对象的统一建模语言的可视化建模工具.用于可视化建模和公司级水平软 ...

  3. springboot rabbitmq 找不到队列

    错误报告: org.springframework.amqp.rabbit.listener.BlockingQueueConsumer$DeclarationException: Failed to ...

  4. Shell脚本(一)入门

    开始学习Shell脚本. #!/bin/bash ]; then echo "you are not root" else echo "you are root" ...

  5. F. Multicolored Markers 暴力+二分

    F. Multicolored Markers 题目大意: 给你 a个红块 b个蓝块 拼成一个实心矩形,并且要求红块或者蓝块自成一个矩形,问形成的这个矩形最小的周长是多少. #include < ...

  6. 【FPGA篇章七】FPGA系统任务:详述常用的一些系统函数以及使用方法

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 系统任务和系统函数是Verilog标准的一部分,都以字符"$"为开头.系统任务可划分为六类,下面分别给出一些常用任务的用 ...

  7. pyltp安装教程及简单使用

    1.pyltp简介 pyltp 是哈工大自然语言工作组推出的一款基于Python 封装的自然语言处理工具(轮子),提供了分词,词性标注,命名实体识别,依存句法分析,语义角色标注的功能. 2.pyltp ...

  8. 一文教你快速修改ubuntu终端显示的主机名和用户名

    为了让终端的显示更加简洁,清爽,改掉显示的用户名和主机名,改成你喜欢的名字. 创作不易,如果本文帮到了您: 如果本文帮到了您,请帮忙点个赞

  9. 老板:kill -9 的原理都不知道就敢去线上执行?明天不用来了!

    GitHub 14.5k Star 的Java工程师成神之路,开放阅读了! 相信很多程序员对于Linux系统都不陌生,即使自己的日常开发机器不是Linux,那么线上服务器也大部分都是的,所以,掌握常用 ...

  10. js 获取URL后面传的参数

    function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...