欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue组件编写之todolist组件实例详解

程序员文章站 2022-03-21 15:13:18
我们在topnav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行。。所以代码看得不舒服,见谅啊,我最后会放github的...

我们在topnav这个页面上插入一个todolist子组件

我不知道怎么回事,这里的markdown的代码总是串行。。所以代码看得不舒服,见谅啊,我最后会放github的源代码地址。

1. 父组件topnav中注册子组件,引入子组件

<template>
 <div>
  <p>下面这一行就是定义的组件名称</p>
  <todo-list></todo-list>
  <router-view></router-view>
 </div>
</template>
<script>
/*

    1. 通过import来引入我们的子组件drawerlayout

    2. 引入子组件,并重新取名为todolist,然后在components组册一下

    3.在我们的template中按照html标签的形式使用组件,todolist就是<todo-list>

注意:

    (1) 子组件的名字无所谓,但是我们引入的那个子组件名todolist,第二个单词的首字母一定要大写(不然你会踩坑的)

    (2) 使用标签时,todolist,就是todo-list,就是写成驼峰命名法(通俗说就是在第二个单词的大写首字母改成小写形式,然后前面加一个 “-”)

*/
import todolist from '../components/todolist.vue'
 export default {
  components: {
   todolist
  },
  data() {
   return {
   };
  }
 }
</script>

2. 先看看组件的功能

首先我们先大体看看组件长啥样,然后我才去构思如何写

首先我们看到的是一个input输入框,默认显示edit..,当我们没有添加数据的时候,下方显示的“暂无内容”

vue组件编写之todolist组件实例详解 

接着,我们输入数据“第一个例子”然后敲击回车,就会出现一行list

list包括一个单选框,文字,还有一个删除的按钮

vue组件编写之todolist组件实例详解 

那怎么删除呢?那既然要做,肯定稍微做多一点功能,把一些内部指令都用一下,我们设置的删除规则是

先选中该list,然后点击删除,然后该条记录就没有了,如果删除这个数据后,就没有list了,那“暂无内容”就要显示出来了

vue组件编写之todolist组件实例详解

vue组件编写之todolist组件实例详解

3. 开始写我们的todo子组件了

关于代码中的样式我放在最后,所以此刻你可以忽略一些class

我们先把这个todolist的大体框架搭好,然后往里面增加功能

<template>
<div class="ex1">
  <div class="input-text">
 <label for="inputnum">请输入:</label>
 <input type="text" 
    id="inputnum" 
    name="inputnum" 
    placeholder="edit..">

 <!--列表内容-->
 <ul>
  <li>
   <input type="checkbox" >
   <span>dd</span>
   <button>删除</button>
  </li>
 </ul>
 <p class="empty" v-if="!inputlist.length">暂无内容</p>
  </div>
</div>
</template>
<script>
 export default {
  data () {
   return {
    inputlist: [],
    inputitem: {
     content: '',
  finished: false,
  deleted: false
 }
   }
  },
  methods: {
   //将输入框的数据添加到list中  
   additem: function() {}
   //改变选中状态
   changestate: function(index) {},
   //删除列表元素
   deleteitem: function(index) {}
  }
 }
</script>

vue组件编写之todolist组件实例详解 

接下来我就不针对每一小步都给出代码来更新了,因为篇幅太大,我会更具一个功能块来写(我会很详细的)

首先我们先理清以下思路

在输入框中输入数据,按下回车就会在下方显示一行list列表(包括一个单选框,输入的数据,蓝色操作按钮)

将输入框的值和inputitem.content进行双向绑定

给输入框绑定回车事件(@keydown.13)到additem方法中,每次输入回车,就将输入框的数据添加进list列表中(inputlist数组中)

利用v-for指令遍历inputlist中的值并显示

选中单选框,list的内容变成删除效果(中间横线划过),蓝色操作按钮变成红色删除按钮,点击按钮,就会删除该列list

将单选框的checked和inputitem的finished进行绑定,绑定后就可以利用这个finished来做一些别的事了

刚添加进列表内容的list的按钮是蓝色操作按钮,如果我们要通过单选框的选中与否的两种状态来使content的子添加和移除一个class(就是上面说的删除效果),以及将按钮变成红色的删除按钮,那就可以绑定changestate方法来操作

那删除功能呢?首先,我们要选中该行list,再点击删除才能删除该行数据,对吧。所以我们将按钮绑定一deleteitem方法,方法做的事情就是先检测该行的finished是否是true,如果是true,那么我们就删除该行数据

我们先完成添加功能:在输入框输入数据,回车,会在下面显示一行列表(包括单选框,输入的数据,删除按钮)

<template>
<div class="ex1">
  <div class="input-text">
 <label for="inputnum">请输入:</label>
 
  <!--@keydow.13表示回车的事件-->
  <!--v-model是为了让输入的数据和inputitem.content同步-->
  
  <input type="text" id="inputnum" name="inputnum" placeholder="edit.."
   @keydown.13="additem" v-model="inputitem.content" class="edit"
  >
  <!--列表内容-->
  <ul class="task">
   <li v-for="(key, item) in inputlist">
    <input type="checkbox" :checked="item.finished">
    <span>{{key.content}}</span>
    <button class="del">删除</button>
   </li>
  </ul>
 <p class="empty" v-if="!inputlist.length">暂无内容</p>
  </div>
</div>
</template>
<script>
 export default {
  data () {...省略  },
  methods: {
   additem: function() {
     this.inputlist.push(this.inputitem);
     /*
     为什么我们要对inputitem再次初始化?
     解答:因为每次在输入框中输入数据,都会同时改变inputitem的content属性,
     然后我们点击回车,该inputitem的整个对象都添加进inputlist中,
     按正常逻辑来说,inputlist内的内容和inputitem是没有联系了。
     如果我们此时不对inputitem进行再次初始化,那么就会发现你再次在输入框中输入数据的时候,
     会同时改变下面的list的值,简易你们把初始化的代码去掉,运行下试试看!
     */
  this.inputitem = {
      content: '',
      finished: false,
      deleted: false
  };
   },
   //改变选中状态
   changestate: function(index) {},
   //删除列表元素
   deleteitem: function(index) {}
  }
 }
</script>

我们先看看列表内容的代码

<!--列表内容-->
<ul class="task">
 <li v-for="(item, index) in inputlist">
  <!--单选框绑定了item.finished,还添加了点击事件-->
  <input type="checkbox"
  :checked="item.finished"
  @click="changestate(index)"
  >
  <!--通过item.finished值来动态绑定class-->
  <span :class="{'finish':item.finished}">{{item.content}}</span>
  <!--按钮的颜色通过动态添加class来实现,然后按钮的文本通过改变isdel来实现,isdel的改变也是通过changestate方法来操作的-->
  <button @click="deleteitem(index)"
   class="del"
   :class="{'native':item.finished === true}"
  >{{isdel}}</button>
 </li>
</ul>
<p class="empty" v-if="!inputlist.length">暂无内容</p>

然后我们讲解changestate方法

//改变选中状态
   changestate: function (index) {
    // this.inputlist[index].finished = true 错误:这样如果点击第二次,无法回到false,就会一直true状态
    this.inputlist[index].finished = !this.inputlist[index].finished;
    // 根据finished的值来对应的修改isdel的值,isdel的值就是按钮的文本
    if (this.inputlist[index].finished) {
   this.isdel = '删除'
    }else {
     this.isdel = '操作'
 }
   },
//删除列表元素
   deleteitem: function (index) {
   if (this.inputlist[index].finished) {
    his.inputlist.splice(index,1);
   }
   }

总结

以上所述是小编给大家介绍的vue组件编写之todolist组件实例详解,希望对大家有所帮助