本节课我们再来编写一个小案例，任务管理器。
编写列表结构
首先新建一个 demo4.html 文件，复制第一节课的helloWorld代码，改写一下 template，编写一个 ul 列表
<script>
Vue.createApp({
data(){
return {
message:"hellow world"
}
},
template:`
//修改此处
<div>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>工作</li>
</ul>
</div>
`,
}).mount("#app")
</script>循环列表
在 data 方法中，声明一个 list 数组变量 ["吃饭","睡觉","工作","娱乐"] ，然后修改template 中的代码 删除多余 li 只保留一个 ，在 li 元素上 使用循环 v-for 指令， item 代表当前循环数组的值，使用 {{}} 插值表达式在li中插入item的值。
<script>
Vue.createApp({
data(){
return {
//修改此处
list: ["吃饭", "睡觉", "工作", "娱乐"]
}
},
template:`
<div>
<ul>
//修改此处
<li v-for="item in list">{{item}}</li>
</ul>
</div>
`,
}).mount("#app")
</script>v-for中还有一个索引值 如下写法，可以渲染出索引值，index 代表当前循环数组的索引。
<li v-for="(item,index) in list">{{item}}--{{index}}</li>动态添加
在template中添加一个 input 和 button，用作添加新数据。
template:`
<div>
//修改此处
<input type="text"/>
<button>添加</button>
<ul>
<li v-for="(item,index) of list">{{item}}--{{index}}</li>
</ul>
</div>
`,为接收 input 的值，我们在data中声明一个变量 inputText:"" ，使用 v-model 把变量 inputText 绑定在 input 元素上 。
然后给button 添加按钮绑定一个点击事件，使用 v-on:click="handelAddItem" 在methods 中添加一个方法handelAddItem()， 把 inputText 的值，添加到 list 数组中
this.list.push(this.inputText)。
<script>
Vue.createApp({
data(){
return {
list: ["吃饭", "睡觉", "工作", "娱乐"],
inputText:""
}
},
//修改了此处
methods: {
handelAddItem(){
this.list.push(this.inputText)
}
},
template:`
<div>
<input v-model="inputText" type="text"/>
<!--修改了此处-->
<button v-on:click="handelAddItem">添加</button>
<ul>
<li v-for="(item,index) of list">{{item}}--{{index}}</li>
</ul>
</div>
`,
}).mount("#app")
</script>用浏览器打开，这时候我们就可以随意添加任务了，添加完之后我们希望把 input 元素设置为空，在 handelAddItem 方法里面，我们只需要把 inputText 赋值为空，就可以了
methods: {
handelAddItem(){
this.list.push(this.inputText)
//修改了此处
this.inputText = ''
}
},到这里我们这个案例就算写完了，在使用 v-modal 时我们发现只要 input 元素中输入内容，变量 inputText 就会自动被赋值输入的内容，修改变量 inputText 的值， input 元素的值也会自动被修改，这就是vue的另一个特性数据双向绑定。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue基本构造</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data(){
return {
list: ["吃饭", "睡觉", "工作", "娱乐"],
inputText:""
}
},
methods: {
handelAddItem(){
this.list.push(this.inputText)
//修改了此处
this.inputText = ''
}
},
template:`
<div>
<input v-model="inputText" type="text"/>
<!--修改了此处-->
<button v-on:click="handelAddItem">添加</button>
<ul>
<li v-for="(item,index) of list">{{item}}--{{index}}</li>
</ul>
</div>
`,
}).mount("#app")
</script>
</html>