功能说明
1. 点击一个div区域，随机变化4中css样式。
2. 将一个div模块绑定style样式
3. 要求： 都需要交给vue托管。
效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名属性</title>
<style>
.basic{
background-color: aqua;
font-size: 10px;
}
.happy{
font-size: 20px;
background-color: blanchedalmond;
}
.sad{
font-size: 30px;
background-color: blueviolet;
}
.normal{
font-size: large;
background-color: orange;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 绑定css样式 -->
<div class="basic" v-bind:class="mood" v-on:click="changeMood">欢迎来{
{name}}学习</div>
<br/>
<div class="basic" v-bind:style="styleObj">欢迎来{
{name}}学习</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
name:'西湖区',
mood:'sad',
styleObj:{
fontSize:'40px',
color:'green',
backgroundColor:'orange'
}
},
methods: {
changeMood() {
const arr = ['happy', 'sad', 'normal']
// 随机生成选择一个
let x = Math.floor(Math.random()*3)
this.mood = arr[x];
console.log(`现在的样式是${this.mood}`)
}
}
})
</script>