移除数组arr属性中的值：vm.arr.shift()
新增数组arr属性中的值：vm.arr.push(‘属性值’)
- 移除atguigu3样式后效果：
- 向数组arr中添加样式值后效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定样式</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<style>
.basic {
width: 300px;
height: 50px;
border: 1px solid black;
}
.happy {
border: 3px solid red;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: skyblue;
}
.normal {
background-color: #bfa;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 20px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<!-- 准备一个容器 -->
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>
<div class="basic" :class="arr">{{name}}</div>
</div>
<script type="text/javaScript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
mood:'normal',
arr:['atguigu1', 'atguigu2', 'atguigu3']
},
methods:{
changeMood(){
// this.mood = 'happy'
// 需求1：点击后自动随机选择背景样式
// const arr = ['happy', 'sad', 'normal']
// 获取随机生成 0,1,2 三个数字中的一个
const index = Math.floor(Math.random()*3)
// 随机取出下标值对应的数组值
this.mood = arr[index]
}
}
})
</script>
</body>
</html>
