Vue 小练习01
Posted bigb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 小练习01相关的知识，希望对你有一定的参考价值。
- 有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p :style="myStyle"></p>
<button :style="{backgroundColor: bgc1}" @click="f1">按钮一</button>
<button :style="{backgroundColor: bgc2}" @click="f2">按钮二</button>
<button :style="{backgroundColor: bgc3}" @click="f3">按钮三</button>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
bgc1: 'red',
bgc2: 'yellow',
bgc3: 'blue',
myStyle: {
width: '200px',
height: '200px',
backgroundColor: 'black'
}
},
methods: {
f1() {
this.myStyle.backgroundColor = this.bgc1
},
f2() {
this.myStyle.backgroundColor = this.bgc2
},
f3() {
this.myStyle.backgroundColor = this.bgc3
},
}
})
</script>
</body>
</html>- 一个200X200px的矩形box, 点击box本身, 记录点击次数, 1次box变为粉色, 2次变为绿, 3次变为蓝色, 4次重新回到粉色, 依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p :style="myStyle" @click="f1">{{ counter }}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
counter: 0,
bgc1: 'pink',
bgc2: 'green',
bgc3: 'cyan',
myStyle: {
width: '200px',
height: '200px',
backgroundColor: 'black'
}
},
methods: {
f1() {
this.counter += 1;
if (this.counter % 3 === 1) {
this.myStyle.backgroundColor = this.bgc1
}else if (this.counter % 3 === 2) {
this.myStyle.backgroundColor = this.bgc2
}else {
this.myStyle.backgroundColor = this.bgc3
}
}
}
})
</script>
</body>
</html>以上是关于Vue 小练习01的主要内容，如果未能解决你的问题，请参考以下文章