有的东西,看似简单,实则不简单,还是要多总结,在真实项目当中予以应用。
在vue当中绑定class和style的方式有很多种,基本都知道,但是在项目当中真正遇到需要用样式变化呢的场景却怎么也想不起来,很模糊,只能写一些简单地样式逻辑,今天来总结一下vue中动态绑定样式的情况。
点击激活按钮flag变量取反,切换div class类名应用isActive类或者不应用isActive类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.isActive {
background: red
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<div :class="{'isActive':flag}">
我是一个div
</div>
<button @click="flag=!flag">激活</button>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
flag: false
}
},
})
</script>
</html>
两个按钮分别对isred和isblue变量做取反,盒子本来有个类名circle,动态添加isred和isblue类,class和:class可以共存
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 22:41:24
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-27 22:49:16
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.isActive {
background: red
}
.bg-red {
background: red;
}
.text-blue {
color: blue
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<div class="circle" :class="{'bg-red':isred,'text-blue':isblue}">
我是一个div
</div>
<button @click="isred=!isred">激活</button>
<button @click="isblue=!isblue">激活</button>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
isred: false,
isblue: false
}
}
})
</script>
</html>
当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,一般当条件多余2个时,都可以使用data或者computed,例如使用计算属性:
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 23:03:05
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-27 23:10:22
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.active {
color: blue;
background: red;
}
.error-info {
color: black;
background: #ccc;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<div class="circle" :class="classes">
我是一个div {{isred}} {{isblue}}
</div>
<button @click="isred=!isred">激活</button>
<button @click="isblue=!isblue">激活</button>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
isred: false,
isblue: false
}
},
computed: {
classes() {
return {
active: this.isred && this.isblue,
'error-info': !this.isred && !this.isblue,
}
}
}
})
</script>
</html>
盒子拥有多个类名,则用数组语法标识 注意:带中划线的类型需要加引号!
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 23:03:05
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-27 23:21:53
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.red {
background: red;
}
.text-blue {
color: blue
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<div :class="[red,'text-blue',circle]">
我是一个div
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
red: 'red',
'text-blue': 'text-blue',
circle: 'circle'
}
},
computed: {
}
})
</script>
</html>
数组语法配合三元表达式或者对象语法 注:第一种三元表达式和第二种对象语法效果是一样的
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 23:03:05
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-27 23:26:56
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.red {
background: red;
}
.text-blue {
color: blue
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<div :class="[isred? red:'','text-blue',circle]">
我是一个div
</div>
<div :class="[{'red':isred},'text-blue',circle]">
我是一个div
</div>
<button @click="isred=!isred"></button>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
red: 'red',
'text-blue': 'text-blue',
circle: 'circle',
isred: false
}
},
computed: {
}
})
</script>
</html>
利用计算属性动态生成盒子类名,通过下拉框控制btn-large btn-middle btn-small的切换,通过disabled变量控制btn-disabled的添加与移除。
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 23:33:25
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-27 23:42:28
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.btn-disabled {
background: #aaa;
}
.btn-large {
width: 200px;
height: 80px;
}
.btn-middle {
width: 120px;
height: 60px;
}
.btn-small {
width: 80px;
height: 50px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<button :class="dynamicClass">我是动态按钮</button>
<select v-model="size">
<option value="">请选择</option>
<option value="large">大</option>
<option value="middle">中</option>
<option value="small">小</option>
</select>
<button type="button" @click="disabled=!disabled">切换动态按钮是否禁用</button>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
size: '',
disabled: true
}
},
computed: {
dynamicClass() {
return [
'btn',
{
['btn-' + this.size]: this.size !== "",
['btn-disabled']: this.disabled
}
]
}
}
})
</script>
</html>
绑定在组件上 注:组件上绑定的class会渲染到组件根元素上!
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 23:33:25
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-27 23:53:27
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.red {
color: red
}
.fontClass {
font-size: 55px
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
<my-component :class="{'red':isred}"></my-component>
<button @click="isred=!isred">点击切换</button>
</div>
</body>
<script>
Vue.component("my-component", {
template: "<p>我是一段文本</p>"
})
var app = new Vue({
el: "#app",
data() {
return {
isred: false
}
},
computed: {
}
})
</script>
</html>
内联样式,也有数组语法,对象语法,复杂且长可以写到data或computed中
<!--
* @Descriptions:
* @Version:
* @Author:
* @Date: 2020-07-27 23:33:25
* @LastEditors: dongwenjie
* @LastEditTime: 2020-07-28 00:05:16
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
<div id="app">
<div>
<el-color-picker v-model="color"></el-color-picker>
<div :style="{'color':color,'fontSize':fontSize+'px'}">内联style</div>
<button @click="fontSize++">加大字号</button>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
color: null,
fontSize: 12
}
},
computed: {
}
})
</script>
</html>
在样式开发过程中,有两个问题比较突出:全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;
style-loader 的功能就一个,在 DOM 里插入一个 <style> 标签,并且将 CSS 写入这个标签内。稍后会详细分析源码,看看和我们的思路是否一致。
这篇文章主要讲述由于嵌套deep的错误用法而导致的移动端真机样式失效问题,已经对于deep深刻理解和不是此原因的小伙伴就不用看了
先看例子,我们可以在里面填写样式,直接修改就当前页面的UI,是不是觉得很神奇,这是如何实现的呢,其实只是一个style的标签就可以搞定,代码如下
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!