步骤1: 看到input,就想到双向绑定,这样才能改变data数据,继而对显示也可以进行操作。所以呢,就会用到v-model这个属性,定义content用来保存input输入的值。
步骤2: 既然有列表罗列,肯定需要一个列表,list用于存储或者说记忆所有存储的内容。list是个数组。
步骤3: 有了input以及list之后,我们需要将input推送到list,我们就需要一个点击事件触发 --@click
步骤4:最后一步,把list罗列到页面上进行显示 --v-for
首先:将静态模板做一下:
<div id="root"> <input type="" name="" v-model="content"> <button @click="submit">提交</button> <ul> <li></li> </ul> </div>
接下来是js部分,定义data:
data() { return { content: '', list: [] } }
步骤1和步骤2已经完成,接下来就完成步骤3和步骤4,首先做一下如何将input里的内容推送到list里,当然要写在methods里:
methods: { submit () { this.list.push(this.content) //用push推到列表栈里 } }
最后一步,将列表展示在页面上:
<ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul>