老师，麻烦看一下为什么我的v-bind绑定不成功？

来源：1-4 组件概念初探，对 TodoList 进行组件代码拆分

张艺兴的宝贝

2022-11-26 16:26:54

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

<body>
    <div id="root"></div>
</body>
<script>
    //! {{}} 插值表达式 

    //! 在vue中如果在一个标签上某一个属性希望和数据绑定的话，需要使用v-bind(示例：v-bind:title="变量")；如果在标签内部希望和数据绑定的话，直接使用插值表达式即可

    //! 组件：页面中的一部分；最小的组件就是一个标签 


    Vue.createApp({
        data(){
            return{
                inputValue:'',
                list:[]
            }
        },
        methods:{
            handleAddItem(){
                this.list.push(this.inputValue),
                this.inputValue = ''
            }
        },
        template:`
        <div>
            <input v-model="inputValue" />
            <button v-on:click="handleAddItem" v-bind:title="inputValue">
                增加
            </button>
            <ul>
                <li v-for="item of list">{{item}}</li>
            </ul>
        </div>
        `
    }).mount('#root')
</script>
</html>

写回答

1回答