v-for 列表的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in shuzu">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
shuzu:["a","b","c","d"]
}
})
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/529f39c28028e5e10fbde5d11de1a787.png)
v-on 点击加减数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数为:{{counter}}</h2>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter:0
},
methods:{
add:function(){
console.log("加一个数字");
this.counter++;
},
sub:function(){
console.log("减一个数字");
this.counter--;
}
}
})
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/86ff3990acaad96d8f1bcee8aec66111.png)