王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
<!--
v-for 标签的遍历
v-on 绑定事件
v-model 数据的双向绑定
-->
<html>
<title>todolist</title>
<body>
<div id="app">
<input type="text" v-model="inputVal">
<button v-on:click="onClick">提交</button>
<ul>
<!-- <li>第一课</li>
<li>第二课</li>
<li>第三课</li> -->
<!-- v-for 标签的遍历 -->
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
list:['第一课','第二课','第三课'],
inputVal:''
},
methods:{
onClick:function(){
// alert(this.inputVal)
//向list中添加数据
this.list.push(this.inputVal);
//清空input内容
this.inputVal='';
}
}
})
</script>
</html>
