vue基础：将表单中的数据按列表显示在页面下，删除数据this.list.push()，this.list.push()。

- 日理万妓 2022-03-25 10:49 68阅读 0赞

### 将表单中的数据按列表显示在页面下，删除数据 ###

#### 1.添加数据 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]

1.在页面中，首先通过数据的双向绑定，表单中的v-model=“todo”，绑定数据。  
2.通过调用@click="doadd()"方法中的this.list.push(this.todo)，将todo中的数据加到list中。  
3.通过循环列表显示。

<template>
      <div id="app">
        <input type="text" v-model="todo"/>
        <button @click="doadd()">增加</button>
        <br>
        <br>
        <ul>
        <li v-for="a in list">
          {
       {a}}
        </li>
      </ul>
      </div>
    </template>
    
    <script> export default { data(){ return{ todo:'', list:[] } }, methods:{ doadd(){ this.list.push(this.todo) this.todo='' } } } </script>
    
    <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

#### 2.删除添加的数据 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 1]

<template>
      <div id="app">
        <input type="text" v-model="todo"/>
        <button @click="doadd()">增加</button>
        <br>
        <br>
        <ul>
        <li v-for="(aa,key) in list">
          {
       {aa}}--<button @click="dodel(key)">删除</button>
        </li>
      </ul>
      </div>
    </template>
    
    <script> export default { data(){ return{ todo:'', list:[] } }, methods:{ doadd(){ this.list.push(this.todo) this.todo='' }, dodel(key){ // alert(key) this.list.splice(key,1) } } } </script>
    
    <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

1.在添加中我们用了this.list.push(this.todo)，因此删除就有this.list.push(this.todo)。  
2.需要注意的是在删除时，我们要获取每条数据的标号，才能对应删除，所以在比那里列表的时候，就不单单是输出值，也要表索引表示出来。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220325/b226c6fe0ad74e808b563e7c1ebb52b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 1]: /images/20220325/d08503ab6d11464585e7edef213b69de.png