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. Ubuntu Install Chinese Input Method

    为了提高在Linux系统使用中文输入的体验,安装搜狗拼音输入法. 确保键盘输入系统选中fcitx. 搜狗拼音输入法基于fcitx(Free Chinese Input Toy for X)框架,所以要 ...

  2. vue做商品选择如何保持样式

    是这样的情况:我知道,在vue里,实现点击高亮,可以使用诸如: <div class="static" v-bind:class="{defaultClass ,a ...

  3. 图论--最短路--dijkstra(含路径输出)模板

    #include<iostream> #include<stack> #include<queue> #include<cstring> #includ ...

  4. 实现MapReduce

    简介 当我们要统计数亿文本的词频,单个机器性能一般,况且是数亿级数据,处理是十分缓慢的,对于这样的任务,希望的是多台电脑共同处理,大幅度减少任务时间.联合多台电脑一起工作的系统就是分布式系统. 最近在 ...

  5. django+nginx+uwsgi的生产环境部署(Ubuntu16.04)

    一,准备工作: 代码一定要能本地跑起来! 各种基础包的安装略默认已经安装python3,nginx,uwsgi等基础依赖,注意版本问题. 本地setting.py文件修改如下(改为生产模式,把debu ...

  6. redis关闭报没有权限No auth

    Redis安装之后,如果设置了密码,需要在关闭服务的时候也提供密码,否则无法关闭服务,可以直接通过修改/etc/init.d/redis启动脚本解决. Redis服务的启动和关闭脚本,只需要在关闭的脚 ...

  7. php5与php7安全性的区别

    0X01 前言 本篇文章大多为转载,但是修正了一些不正确的说法,对某些功能点的变更指出具体是哪个版本变更,加入了一些小更新. (原文地址:https://www.freebuf.com/article ...

  8. 关于MySQL数据库的卸载

    首先对于MySQL这款数据库来讲,不能简单的卸载就草草了事,我们首先在mysql的文件下面找到my.ini这个文件, 在其中找到mysql数据库所产生的data文件,这个文件一般在c盘的一个隐藏目录下 ...

  9. mybatis的关系映射

    一.多对一的映射关系 举例:根据员工编号查询员工所在部门的部门信息 第一步,需要在多的一方也就是员工实体类中持有一的一方部门实体类的引用 第二步,在dao接口中声明方法 第三步,在mapper中实现该 ...

  10. 动态代理学习(一)自己动手模拟JDK动态代理

    最近一直在学习Spring的源码,Spring底层大量使用了动态代理.所以花一些时间对动态代理的知识做一下总结. 我们自己动手模拟一个动态代理 对JDK动态代理的源码进行分析 文章目录 场景: 思路: ...