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

时间:2024-05-21 22:07:23

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

1.添加数据

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

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

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

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