(1)跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" value="跑起来" id="btn1" @click="lang">
<input type="button" value="stop" id="btn2" @click="stop">
<br>
<h4>{{msg}}</h4>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var wm = new Vue({
el:"#div1",
data:{
msg:"南京工业大学,我的母校~~!",
intervalId: null
},
methods: {
lang() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1);
var end = this.msg.substring(1);
this.msg = end + start;
}, 400)
},
stop(){
clearInterval(this.intervalId);
this.intervalId = null;
}
}
}
)
</script>
</body>
</html>
(2)简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<input type="text" value="" v-model="n1">
<select name="myselect" v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" value="" v-model="n2">
<input type="button" value="=" @click="calc()">
<input type="text" value="" v-model="result">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#div1",
data: {
n1:0,
n2:0,
result:0,
opt:"+"
},
methods:{
calc(){
(======第一种写法==========)
switch(this.opt){
case "+":
this.result = parseInt(this.n1)+parseInt(this.n2);
break;
case "-":
this.result = parseInt(this.n1)-parseInt(this.n2);
break;
case "*":
this.result = parseInt(this.n1)*parseInt(this.n2);
break;
case "/":
this.result = parseInt(this.n1)/parseInt(this.n2);
break;
}
// (第二种写法,投机取巧的方法,正常开发中最好少用)
// var codeStr = parseInt(this.n1) + this.opt + parseInt(this.n2);
// this.result = eval(codeStr);
}
}
})
</script>
</body>
</html>
(3)v-for中key的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div id="div1"> <div> ID值:<input type="text" v-model="id"> Name: <input type="text" v-model="name"> <input type="button" value="增加" @click="add"> </div> <p v-for="user in list" :key="user.id"><input type="checkbox">{{user.id}}==={{user.name}}</p> </div> <script src="vue-dev/vue-dev/dist/vue.min.js"></script> <script> var vm = new Vue({ el:"#div1", data: { id:"", name:"", list:[ {id:1,name:"周杰伦"}, {id:2,name:"张杰"}, {id:3,name:"王力宏"}, {id:4,name:"林俊杰"}, ] }, methods:{ add() { // 添加方法 this.list.unshift({id:this.id,name:this.name}) } } }) </script> </body> </html>