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. Nginx/LVS/HAProxy 负载均衡软件的优缺点详解

    Nginx/LVS/HAProxy 负载均衡软件的优缺点详解   Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验 ...

  2. Spring Boot 面试,一个问题就干趴下了!

    最近栈长面试了不少人,其中不乏说对 Spring Boot 非常熟悉的,然后当我问到一些 Spring Boot 核心功能和原理的时候,没人能说得上来,或者说不到点上,可以说一个问题就问趴下了! 这是 ...

  3. Android or Java的回调粗俗理解 这才是最通俗易懂的

    FUCK,网上装逼者甚众矣! 网上一堆关于JAVA函数回调的见解文章,都说自己写的明白,但没几个我看的明白的. 不如自己写一个东西,回头自己看着舒服 回调函数:定义自己百度 干嘛的? 场景就是事务A执 ...

  4. 【朝花夕拾】Android性能篇之(八)ANR篇--草稿

    1.ANR概念 2.ANR发生场景 Android开发者官网 上说到了两个原因:(1)点击按键或者触摸屏幕等输入事件在5s内没有响应:(2)10s内没有完成广播事件.如下所示: Android wil ...

  5. 补习系列(15)-springboot 分布式会话原理

    目录 一.背景 二.SpringBoot 分布式会话 三.样例程序 四.原理进阶 A. 序列化 B. 会话代理 C. 数据老化 小结 一.背景 在 补习系列(3)-springboot 几种scope ...

  6. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  7. ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

  8. acrobat pdf 按页拆分

    百度 https://jingyan.baidu.com/article/37bce2be7098a21002f3a2f2.html 百度acrobat版本比我的高,操作不同了: 我的方案: 组织页面 ...

  9. wkhtmltox实现网页转换成图片或pdf

    1.先下载http://download.gna.org/wkhtmltopdf/obsolete/windows/wkhtmltox-0.11.0_rc1-installer.exe,安装 2.在命 ...

  10. 备忘录模式 Memento 快照模式 标记Token模式 行为型 设计模式(二十二)

    备忘录模式 Memento   沿着脚印,走过你来时的路,回到原点.     苦海翻起爱恨   在世间难逃避命运   相亲竟不可接近   或我应该相信是缘份   一首<一生所爱>触动了多少 ...