1、在Vue中使用CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
/*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
[v-cloak]{
display: none;
}
.box{width: 100px;height: 100px;background: #ff0000}
.fontSize{color: #FFFFFF;size: 20px}
</style>
</head>
<body>
<div id="app" v-cloak>
<div :class="{box:isShow,fontSize:true}">对象写法</div>
<button type="button" @click="isShow=!isShow">显示/隐藏</button>
<div :class="['box','fontSize']">数组的写法</div>
<div :style="{width:'100px',height:'100px',backgroundColor:'#00ff00'}">内联样式</div>
<div v-bind:style="[boxStyle, fontStyle]">内联数组对象写法</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
//data方法,为了避免出现相互引用的问题,我们要用方法来初始化数据形成一个作用域,防止各个组件互相引用
data(){
return{
isShow:true,
boxStyle:{
width:'100px',
height:'100px',
backgroundColor: