vue设置isactive_vue 绑定样式的几种方式
vue 绑定样式对象语法1.v-bind:class设置一个对象，动态切换classxxx样式是否起作用，根据isActive的布尔值是否为true2.:class可以和class共存xxx当isActive值为true，isError为false，样式为 static和isActive。当isActive值为false，isError为true，样式为 static和isError。当isAct
vue 绑定样式
对象语法
1.v-bind:class设置一个对象，动态切换class
样式是否起作用，根据isActive的布尔值是否为true
2.:class可以和class共存
当isActive值为true，isError为false，样式为 static和isActive。
当isActive值为false，isError为true，样式为 static和isError。
当isActive值为true，isError为true ，样式为 static和isActive、isError
3. :class可以绑定数据中的对象
export default {
data(){
return{
classobj:{ //可以直接绑定一个对象，对象里面有多个样式
active:true,
error:false
}
}
}
}
数组语法
4.v-bind:class设置一个数组
使用了数组就要在data中指定重命名
export default {
data(){
return{
activeCls:'active', //相当于样式active样式在div中重命名 为activeCls
errorCls:'error'
}
}
}
.active{xxx}
.error{xxx}
5.三元表达式
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.数组语法中使用对象语法
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组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
开发vue全局插件的4种方式
定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...
JS与JQ绑定事件的几种方式.
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定
为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果
...python 中增加css样式的三种方式
增加css样式的三种方式:
【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
[工作中的设计模式]装饰模式decorator
一.模式解析 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式的要点主要是: 1.需要对已有对象扩展新的功能,又不希望改变原有对 ...
activity变成Dialog的步骤
1.在布局文件上最外层最好使用RelativeLayout来布局,如果使用LinearLayout来布局的话,显示对话框的话,感觉会有点问题: 要在预览中看到框框,并且是match_parent的,而 ...
转：Android应用性能测试
Android用户也许会经常碰到以下的问题: 1)应用后台开着,手机很快没电了——应用耗电大 2)首次/非首次启动应用,进入应用特别慢——应用启动慢 3)应用使用过程中,越来越卡——CPU能力不足/内 ...
ES6使用Set实现数组去重
ES6里新添加了两个很好用的东西,Set和Array.from. Set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目. 常情况下,NaN === NaN 返回的是fa ...
关于fftshift----将零频率的分量移到频谱的中心
fftshift 作用:将零频点移到频谱的中间 用法: Y=fftshift(X) Y=fftshift(X,dim) 描述:fftshift移动零频点到频谱中间,重新排列fft,fft2和fftn的 ...
Unity中巧用协程和游戏对象的生命周期处理游戏重启的问题
主要用到协程(Coroutines)和游戏对象的生命周期(GameObject Lifecycle)基础知识,巧妙解决了游戏重启的问题. 关于协程,这里有篇文章我觉得写的非常好,理解起来也很容易.推荐 ...
X Window(远程桌面)
X Window在位映射屏幕上的一个或多个窗口中运行程序.用户可以在每个窗口中同时运行多个程序,并且可以通过用鼠标在窗口之间进行切换. x服务器的程序在本地工作站上运行,并且管理它的窗口和程序. 每个 ...
go interface 的坑
一.概述 [root@node175 demo]# tree . ├── lib │ └── world.go ├── README └── server.go directory, files ...
decode和encode
作者:于洋链接:https://www.zhihu.com/question/23374078/answer/69732605来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
ros 录制
rosbag record cd ~/bagfiles # 存放.bag数据的路径 1. 录制所有 topic rosbag record -a # 录制所有topic 2. 录制指定的 topic ...
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)