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. ROC-RK3328-CC开源主板运行LibreELEC系统

    LibreELEC是运行Kodi媒体中心的轻量级操作系统,基于Linux内核发行,系统为适配Kodi运行环境,做了许多优化和精简,运行速度快,操作简单.是一款很优秀的多功能播放器操作系统. ROC-R ...

  2. 字符串后面空字符的问题(char*与string的转换)

    今天AC了不少题,困扰已久的Time limit error 也解决了,记住下次用STL容器的时候一定要清空容器. 其次是字符数组与字符串的浅谈. 字符数组是以'\0'结尾的,所以在字符数组赋值给字符 ...

  3. 洛谷P1217 回文质数

    题目描述 因为 151 既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围 [a,b] (5 \le a < b \le 100,000 ...

  4. python(If 判断)

    一.if判断 如果 条件满足,才能做某件事情, 如果 条件不满足,就做另外一件事情,或者什么也不做 注意: 代码的缩进为一个 tab 键,或者 4 个空格 在 Python 开发中,Tab 和空格不要 ...

  5. lh的简单图论

    lh的简单图论 http://10.64.70.166/problem/1112 lh的简单图论   Description 众所周知,集训队的lh同学txdy,有一天他在写着代码,突然哼起了rapr ...

  6. XSS检测总结

    XSS漏洞介绍     跨站脚本XSS是一种针对网站应用程序的安全漏洞攻击技术.恶意攻击者往web页面插入恶意的Script代码,当用于浏览该页时,嵌入web中的恶意代码就会被执行,从而达到恶意攻击用 ...

  7. 使用Android studio过程中发现的几个解决R变红的办法

    刚开始使用Android studio的时候,好几次碰见新建了一个xml文件,或者new了一个activity之后,Android studio莫名其妙的报错了,而显示红色的地方就是常用的(R.id. ...

  8. 闲来无事做个C#小项目——1

    2020-05-10 12:25:47 项目背景就是最近和一些朋友在玩一个游戏,游戏中有一个囤货的东西,就是买进卖出的,然后为了方便计算,所以就先写一个简单的计算器用来算账, 这是界面图(最初形态,没 ...

  9. 安卓集成Unity开发示例(一)

    本项目目的是在移动端的 Native App 中以库的形式集成已经写好的 Unity 工程,利用 Unity 游戏引擎便捷的开发手段进行跨平台开发. Unity官方文档 Unity as a Libr ...

  10. [hdu5351]找规律,大整数模板

    题意:f(1)="a",f(2)="b",f(i)=f(i-1)+f(i-2),"+"表示连接符.给定n,m,求f(n)的前m个字符的“ne ...