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

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

1.添加数据

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.删除添加的数据

<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.需要注意的是在删除时，我们要获取每条数据的标号，才能对应删除，所以在比那里列表的时候，就不单单是输出值，也要表索引表示出来。