vue--todolist的实现

• Z时代
• 2024-01-10
• 分类：综合

简单示例：

<template>
  <div id="Home">    
    <v-header></v-header>
    <hr>
    {{title}}
    <br>
    <p><input type="text" v-model="todo" /> <button @click="doAdd()">添加</button></p>
    <p v-for="(x,k) in list">{{x}}---- <button @click="removeData(k)">删除</button></p>
  </div>  
</template>
<script>
import Header from './Header.vue'; 
export default {
  name: 'Home',
  data () {
    return {
      title:'todolist',
      todo:'我是一个值',
      list:[],
    }
  },
  methods:{
    doAdd(){
      this.list.push(this.todo);
    },
    removeData(k){
      console.log(k);
      // splice可以在指定的位置进行删除或添加数据
      this.list.splice(k,1);
    }
  },
  components:{
    'v-header':Header,
  }
}
</script>

以上是 vue--todolist的实现 的全部内容， 来源链接： utcz.com/z/376642.html