案例一：计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="+" @click="add"></input>
<span>{{number}}</span>
<input type="button" value="-" @click="minus"></input>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
number: 0
},
methods: {
add: function () {
if (this.number == 10) {
alert("已经是最大了")
} else {
this.number++
}
},
minus: function () {
if (this.number == 0) {
alert("已经是最小了")
} else {
this.number--
}
}
}
})
</script>
</html>
案例二：图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="leftf" v-show="index == imgSrc.length-1">{{left}}</button>
<img :src="imgSrc[index]">
<button @click="rightf" v-show="index == 0">{{right}}</button>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: ["img/1.jpg", "img/2.png"],
index: 0,
isShowRight: true,
isShowLeft: true,
left: "<",
right: ">"
},
methods: {
rightf: function () {
this.index++
console.log(index)
},
leftf: function () {
this.index--
}
}
})
</script>
</html>
案例三：记事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" @keyup.enter="add"></input>
<ol>
<li v-for="(item,index) in notesArr">
{{notesArr[index]}}
<input type="button" value="x" @click="remove(index)" v-show="true"></input>
</li>
</ol>
<div v-show="notesArr.length!=0">
<span>{{notesArr.length}}</span><input type="button" value="clear" @click="clear"></input>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
message: "好好学习",
notesArr: ["吃饭", "睡觉", "打豆豆"],
index: 0
},
methods: {
add: function () {
this.notesArr.push(this.message)
},
remove: function (i) {
this.notesArr.splice(i, 1)
},
clear: function () {
this.notesArr = []
}
}
})
</script>
</html>