案例 1、跑马灯效果
<body>
<div id="app">
<p v-text="msg">跑</p>
<button @click="start">开始</button>
<button @click="stop">停止</button>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "猥琐发育，别浪~",
interval: null
},
methods: {
start() {
this.interval = setInterval(() => {
this.msg = this.msg.substring(1) + this.msg.substring(0, 1);
}, 500);
},
stop() {
clearInterval(this.interval);
}
}
});
</script>
</body>
案列二： 简单计算器
<div id="app">
<input type="text" v-model="num1" />
<select v-model="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" v-model="num2" />
<button @click="getResult">=</button>
<input type="text" :value="result" disabled />
</div>
<script>
new Vue({
el: "#app",
data: {
num1: 0,
num2: 0,
opt: 1,
result: 0
},
methods: {
getResult() {
switch (this.opt) {
case "0":
this.result = parseInt(this.num1) + parseInt(this.num2);
break;
case "1":
this.result = parseInt(this.num1) - parseInt(this.num2);
break;
case "2":
this.result = parseInt(this.num1) * parseInt(this.num2);
break;
case "3":
if (this.num2 == "0") {
alert("除数不能为0");
break;
}
this.result = parseInt(this.num1) / parseInt(this.num2);
break;
}
}
}
});
</script>
</body>
