<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业二</title>
<style>
.back {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<button>红</button>
<button>黄</button>
<button>绿</button>
</p>
<div class="back" :style="{backgroundColor: color}"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
color: 'red'
},
methods: {
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业二</title>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<style>
.back {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<button v-on:click="changecolor" data-color="red">红</button>
<button v-on:click="changecolor" data-color="yellow">黄</button>
<button v-on:click="changecolor" data-color="green">绿</button>
</p>
<p>
<button v-on:click="changecolor1" data-color="red">单个按钮控制颜色</button>
</p>
<div class="back" :style="{backgroundColor: color}"></div>
<p>
<button v-on:click="changecsrc" data-src="showbo">showbo</button>
<button v-on:click="changecsrc" data-src="caozhy">caozhy</button>
<button v-on:click="changecsrc" data-src="weixin_51294385">weixin_51294385</button>
</p>
<img :src="src" />
</div>
<script>
new Vue({
el: '#app',
data: {
color: 'red',
colorIndex: 0,
colors: ['red', 'yellow', 'green'],
src: 'https://profile.csdnimg.cn/7/B/2/3_showbo'
},
methods: {
changecolor: function (e) {
this.color = e.target.dataset.color;
},
changecsrc: function (e) {
this.src ='https://profile.csdnimg.cn/7/B/2/3_'+ e.target.dataset.src;
},
changecolor1: function (e) {
if (this.colorIndex >= this.colors.length - 1) this.colorIndex = 0; else this.colorIndex++;
this.color = this.colors[this.colorIndex];
}
}
})
</script>
</body>
</html>