to-do-list-demo

<!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></title>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>

</head>
<body>
   
    <div id="root"></div>
     
    <script>  
       
        const listRelativeEffect = () => {
            const {reactive} = Vue;
            const list = reactive([])
            const addItemTolist = (item) => {
                list.push(item)  
            }
            return {list,addItemTolist}
        }

        const inputRelativeEffect = () => {
            const {ref} = Vue;
            const inputValue = ref('')
            const handleInputValueChange = (e) => {
                inputValue.value = e.target.value
            }
            return {inputValue,handleInputValueChange}
        }
 
       var app = Vue.createApp({  
            setup(){
                const { list, addItemTolist } = listRelativeEffect()
                const { inputValue, handleInputValueChange } = inputRelativeEffect()
                return {
                    list, addItemTolist,
                    inputValue, handleInputValueChange
                }
            },
            template:`  
                <div>
                    <div>
                        <input :value="inputValue" @input="handleInputValueChange" />
                        <button @click="() => addItemTolist(inputValue)">提交</button>
                    </div>  
                    <ul>
                        <li v-for="(item,index) in list" :key="index">{{item}}</li>
                    </ul>
                </div>  
            `
        })
 
        app.mount('#root')

    </script>

</body>
</html>
posted @ 2021-12-14 09:48  13522679763-任国强  阅读(19)  评论(0)    收藏  举报