老师,分离出来写怎样才能实现点击提交后清空输入框?

来源：2-8 使用 Composition API 开发TodoList（2）

__Promise

2021-08-31 14:18:43

<!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>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
    </style>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    // input输入封装
    const setInput = () => {
        // 获取ref
        const {
            ref
        } = Vue;

        // ref响应式引用
        const inputValue = ref('');

        // 输入框事件监听函数
        handleInputValue = (e) => {
            inputValue.value = e.target.value
        }

        return {
            inputValue,
            handleInputValue
        }
    }

    // list列表封装
    const setList = () => {
        // 获取reactive
        const {
            reactive
        } = Vue;

        // reactive响应式引用
        const listValue = reactive([]);

        // 列表按钮事件监听函数
        const handleListValue = value => {
            listValue.push(value)
        }

        // 删除列表项
        const removeItem = index => {
            listValue.splice(index, 1)
        }

        return {
            listValue,
            handleListValue,
            removeItem
        }
    }

    const vue = Vue.createApp({
        setup() {
            // 解构
            const {
                inputValue,
                handleInputValue,
            } = setInput()
            const {
                listValue,
                handleListValue,
                removeItem
            } = setList()

            // 返回
            return {
                inputValue,
                handleInputValue,
                listValue,
                handleListValue,
                removeItem
            }
        },
        template: `
        <div>
            {{inputValue}}
            <input @input="handleInputValue" :value="inputValue"/>
            <button @click="handleListValue(inputValue)">提交</button>
        </div>
        <ul>
            <li v-for="(item,index) in listValue" :key="item" @click="removeItem(index)">{{item}}</li>
        </ul>
        `
    });
    const vm = vue.mount('#root')
</script>

</html>

写回答

2回答