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. uboot on qemu

    1, download uboot ftp://ftp.denx.de/pub/u-boot/ 2, compile uboot make vexpress_ca9x4_config export A ...

  2. Salesforce吹嘘无代码开发,不用费脑子的人工智能

    Salesforce在星期四举办的Dreamforce '16大会上,开发人员主题演讲可谓面面俱到--听众被舞台包围了,而不是远远地坐在观众席. 这是符合该公司在六月份第一次的开发者大会Trailhe ...

  3. Js6利用class创建类

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

  4. mysql基础(三)存储引擎和锁

    存储引擎的概念: 关系型数据库表是用于存储和组织信息的数据结构,可以将表理解为由行和列组成的表格,各种各样,不同的表结构意味着存储不同类型的数据,在数据的处理上也会存在着差异,对于mysql来说,它提 ...

  5. MySQL分页查询的性能优化

    MySQL limit分页查询的性能优化 Mysql的分页查询十分简单,但是当数据量大的时候一般的分页就吃不消了. 传统分页查询:SELECT c1,c2,cn… FROM table LIMIT n ...

  6. A Tile Painting(循环节)

    Ujan has been lazy lately, but now has decided to bring his yard to good shape. First, he decided to ...

  7. 题解 CF545A 【Toy Cars】

    题目传送门 太弱了,只能写写A题的题解 题意 给你一个 $n·n$ 的矩阵,翻车分三种情况: 如果 $a_i,_j=1$ ,记录第 $i$ 辆车 如果 $a_i,_j=2$ ,记录第 $j$ 辆车 如 ...

  8. 工具类CountDownLatch的应用---百米赛跑案例

    package com.aj.thread; import java.util.concurrent.CountDownLatch; import java.util.concurrent.Execu ...

  9. 第五章:深入Python的dict和set

    第五章:深入Python的dict和set 课程:Python3高级核心技术 5.1 dict的abc继承关系 class Mapping(Collection): __slots__ = () &q ...

  10. 002_python的in,while else,格式化输出,逻辑运算符,int与bool转换,编码

    数据 1.什么是数据? x=10,10是我们要存储的数据 2.为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3.数据类型 数字 字符串 列表 元组 字典 集合 ...