[JavaScript知识库]Vue入门——todoList实例

该todoList例子包含基本的增删改查功能。

1.点击插入的时候会将信息添加在下边的列表中展示；

2.点击每行后边的叉号，会删除该条信息；

3.点击列表的信息，会将信息显示在input框中；

运行效果图：

上代码：

<template>
  <div>
    <el-input v-model="message"></el-input>
    <el-button @click="insert()">插入</el-button>
    <p>{{ message }}</p>
    <p>//</p>
    <ul>
      <li v-for="(list, index) in lists" :key="index" @click="showList(list)">
        <span>{{ list }}</span>
        <el-button @click="deleteList(index)" class="btn" size="small"
          >[X]</el-button
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "学习",
      lists: [],
    };
  },
  methods: {
    //插入函数  将得到的输入框的内容push到数组中
    insert() {
      this.lists.push(this.message);
    },
    // 删除函数 接受当前点击的li的索引，删除1个
    deleteList(index) {
      this.lists.splice(index, 1);
    },
    // 点击li的时候 将当前的list值赋值到message中   实现双向数据绑定
    showList(list) {
      this.message = list;
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  width: 200px;
}
li {
  cursor: pointer;
  list-style-type: decimal;
  height: 50px;
  line-height: 50px;
}

li:hover {
  background-color: rgb(43, 205, 245);
}

.btn {
  float: right;
  margin-top: 10px;
}
</style>

?