vue 绑定样式

对象语法

1.v-bind:class设置一个对象,动态切换class

<div :class="{'active':isActive}">xxx</div>
样式是否起作用,根据isActive的布尔值是否为true

2.:class可以和class共存

<div class="static" :class="{'active':isActive,'error':isError}">xxx</div>
当isActive值为true,isError为false,样式为 static和isActive。
当isActive值为false,isError为true,样式为 static和isError。
当isActive值为true,isError为true ,样式为 static和isActive、isError

3. :class可以绑定数据中的对象

<div class="static" :class="classobj">xxx</div>
export default {
data(){
return{
classobj:{ //可以直接绑定一个对象,对象里面有多个样式
active:true,
error:false
}
}
}
}

数组语法

4.v-bind:class设置一个数组

使用了数组就要在data中指定重命名

<div class="static" :class="[activeCls,errorCls]">xxx</div>
export default {
data(){
return{
activeCls:'active', //相当于样式active样式在div中重命名 为activeCls
errorCls:'error'
}
}
}
<style>
.active{xxx}
.error{xxx}
</style>

5.三元表达式

<template>
<div id="app">
<div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
</div>
</template>
<script>
export default {
data(){
return{
isActive:true,
activeCls:'active', //当isActive值为true时,会执行activeCls对应的样式 active 并且执行baseClass对应的样式 baseclass
errorCls:'error', //当isActive值为false时,会执行errorCls对应的样式 error 并且执行baseClass对应的样式 baseclass
baseClass:'baseclass'
}
}
}
</script>
<style scoped>
.active{
background: red;
}
.error{
color: white;
}
.baseclass{
text-align: center;
}
</style>

三元表达式

<div class="coupon-img" :class="[item.ticket_type==1?'thirty-yuan':'fifty-yuan']">

6.数组语法中使用对象语法

<template>
<div id="app">
<div class="static" :class="[{'active':isActive},baseClass]">xxx</div>
</div>
</template>
<script>
export default {
data(){
return{
isActive:true, //因为isActive值为true,样式为active 和 baseClass对应的 baseclass 所以样式为 active、baseclass
activeCls:'active',
baseClass:'baseclass'
}
}
}
</script>
<style scoped>
.active{
background: red;
}
.baseclass{
text-align: center;
}
</style>

7.定义一个数组通过不同索引值获取不同样式

<div class="icon" :class="classMap[support.type]"></div>
created () {
this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
},
根据support.type的数组变化,索引到classMap对应的样式

绑定内联样式

<div id="app">
<div :style="{color:cl,background:bk}">你好吗?</div></div>
<script>
new Vue({
el:'#app',
data:{
cl:'red',
bk:'yellow'
}
})
</script>

直接绑定到一个样式对象,让模板更清晰:

<div id="app">
<div :style="testObj">你好吗?</div>
</div>
<script>
new Vue({
el:'#app',
data:{
testObj:{
color:red;
background:yellow;
}
}
})
</script>

vue 绑定样式的几种方式的更多相关文章

  1. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  2. 开发vue全局插件的4种方式

    定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...

  3. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  4. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

  5. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  6. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  7. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  8. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. #Java学习之路——基础阶段二(第二篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  2. PHP全栈学习笔记3

    trim()函数,用于去除字符串首尾空格和特殊字符 返回的是去掉的空格和特殊字符后的字符串 string trim(string str [,string charlist]); str 要操作的字符 ...

  3. 初试PySnooper

    Pysooper是什么? 我们写代码会经常出现bug,有的人会使用断点调试器,但是设置这样的断点调试器是花时间的. 所以很多人会在可能出现错误的地方print打印来输出语句. Pysooper的作用有 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  5. .NET Core微服务之基于Ocelot+IdentityServer实现统一验证与授权

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.案例结构总览 这里,假设我们有两个客户端(一个Web网站,一个移动App),他们要使用系统,需要通过API网关(这里API网关始终作为 ...

  6. DotNetCore跨平台~2.0提前发布喽

    回到目录 提前1个多月把2.0发布出来了,小微真的把持不住了,哈哈! windows上安装 http://mp.weixin.qq.com/s/ueJdhaBBCHga0sQlVD6YiQ https ...

  7. Docker核心实现技术(命名空间&控制组&联合文件系统&Linux网络虚拟化支持)

    作为一种容器虚拟化技术,Docker深度应用了操作系统的多项底层支持技术. 早期版本的Docker是基于已经成熟的Linux Container(LXC)技术实现的.自Docker 0.9版本起,Do ...

  8. SpringMVC之Controller和参数绑定

    在上一篇Spring+SpringMVC+Mybatis整合中说到了SSM的整合,并且在其中添加了一个简单的查询功能,目的只是将整个整合的流程进行一个梳理,下面在上一篇中工程的基础上再说一些关于Spr ...

  9. web scraper 抓取分页数据和二级页面内容

    如果是刚接触 web scraper 的,可以看第一篇文章. web scraper 是一款免费的,适用于普通用户(不需要专业 IT 技术的)的爬虫工具,可以方便的通过鼠标和简单配置获取你所想要数据. ...

  10. Java虚拟机垃圾收集算法

    1.标记-清除算法 标记-清除算法分为 "标记" 和 "清除" 两个步骤:首先标记出所有需要回收的对象,然后在标记完成后统一回收所有被标记的对象,是垃圾收集算法 ...