vue设置isactive_vue 绑定样式的几种方式

2024-05-19 23:48:56

vue 绑定样式 ( 中文API：https://www.runoob.com/vue2/vue-class-style.html)

对象语法

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

xxx

样式是否起作用，根据isActive的布尔值是否为true

2.:class可以和class共存

xxx

当isActive值为true，isError为false，样式为 static和isActive。

当isActive值为false，isError为true，样式为 static和isError。

当isActive值为true，isError为true ，样式为 static和isActive、isError

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

xxx

export default{data(){

return{

classobj:{ //可以直接绑定一个对象，对象里面有多个样式

active:true,

error:false}}

}

}

数组语法

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

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

xxx

export default{data(){

return{

activeCls:'active', //相当于样式active样式在div中重命名为activeCls

errorCls:'error'}}

}

.active{xxx}.error{xxx}

5.三元表达式

xxx

export default{data(){

return{

isActive:true,

activeCls:'active', //当isActive值为true时，会执行activeCls对应的样式 active 并且执行baseClass对应的样式 baseclass

errorCls:'error', //当isActive值为false时，会执行errorCls对应的样式 error 并且执行baseClass对应的样式 baseclass

baseClass:'baseclass'}}

}

.active{background:red;

}.error{color:white;

}.baseclass{text-align:center;

}

三元表达式

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

xxx

export default{data(){

return{

isActive:true, //因为isActive值为true,样式为active 和 baseClass对应的 baseclass 所以样式为 active、baseclass

activeCls:'active',

baseClass:'baseclass'}}

}

.active{background:red;

}.baseclass{text-align:center;

}

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

created (){this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]},

根据support.type的数组变化，索引到classMap对应的样式

绑定内联样式

你好吗？

new Vue({el:'#app',

data:{

cl:'red',

bk:'yellow'}})

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

你好吗？

new Vue({el:'#app',

data:{

testObj:{

color:red;background:yellow;

}}

})

vue设置isactive_vue 绑定样式的几种方式相关推荐

vue绑定class的几种方式
vue绑定class的几种方式 1.对象语法在对象上绑定class属性,来控制class 的几种状态. <body><div id = "app">< ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
Vue 设置背景图片样式
Vue 设置背景图片样式 CSS 效果图 CSS <style> body{background-image: url('./bg.jpg');background-size: cover ...
JS设置CSS样式的几种方式（js设置!important）
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 ...
JS设置CSS样式的几种方式
JS设置CSS样式的几种方式 1.直接设置style的属性某些情况下用这个设置!import值无效如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留& ...
html js 设置样式,原生js设置样式笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性用J ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
Android_安卓为按钮控件绑定事件的五种方式
写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick=& ...
深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...

最新文章

热门文章