登录
原创

vue-compositionAPI-todoList添加展示列表

发布于 2021-11-30 阅读 449
  • 前端
  • Vue.js
原创

compositionAPI开发简单todoList(内容添加和展示):

  1. 定义一个输入内容值获取和记录的方法
  2. 定义一个记录列表、添加内容到列表的方法
  3. 利用setup()函数处理业务逻辑,进行流程调度
  4. 标签元素添加相应方法,执行获取和添加内容的方法,以及内容列表的展示

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>todoList</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // input 相关操作- - -获取表单值、记录表单值
  const inputEvent = () => {
    // 从 Vue 中解构赋值,得到 ref
    const { ref } = Vue
    // 定义同步数据 input输入框的值
    const inputValue = ref('')
    // 获取输入框的值
    const getInputValue = (e) => {
      inputValue.value = e.target.value
    }
    // 返回表单的值、获取表单值的方法
    return { inputValue, getInputValue }
  }

  // list 相关操作- - -创建展示列表、添加更新展示列表
  const listEvent = () => {
    // 从 Vue 中解构赋值,得到 reactive
    const { reactive } = Vue
    // 定义同步数据 添加的元素列表list
    const list = reactive([])
    // 将输入框的值添加到list展示列表
    const addListItem = (item) => {
      list.push(item)
    }
    // 返回list展示列表、list新增元素的方法
    return { list, addListItem }
  }

  const app = Vue.createApp({
    // 流程调度
    setup() {
      // 获取表单值、记录表单值
      const { inputValue, getInputValue } = inputEvent()
      // 创建展示列表、添加更新展示列表
      const { list, addListItem } = listEvent()
      return {
        inputValue, getInputValue,
        list, addListItem
      }
    },
    template: `
    <div>
      <input :value="inputValue" @input="getInputValue" />
      <button @click="addListItem(inputValue)">添加</button>
      <ul>
        <li v-for="(item, index) in list" :key="index">{{item}}</li>  
      </ul>  
    </div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

在输入框输入内容,点击添加按钮后,会将输入的内容展示在下方列表:

image.png

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报