[Vue]数据双向绑定v-model

在 Vue 中，只有 v-model 指令实现了数据的双向绑定，其它指令都是单向的

v-model: 只能用于表单类元素（输入类元素，有value值）
v-model:value 可以简写为 v-model

以下代码是错误的：
<a v-model:href="url">hello</h2>     (v-model 只能用于表单元素) 

 

<body>
    <div id="root">
        <!-- 普通写法 -->
        单向数据绑定：<input type="text" name="" id="" v-bind:value="url"><br />
        双向数据绑定：<input type="text" name="" id="" v-model:value="style"><br />
        <!-- 简写 -->
        单向数据绑定：<input type="text" name="" id="" :value="url"><br />
        双向数据绑定：<input type="text" name="" id="" v-model="style"><br />
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: '模板',
            url: "https://www.bilibili.com",
            style: "hello"
        }
    })
</script>

 

posted @ 2023-10-17 14:37  夕苜19  阅读(7)  评论(0)  编辑  收藏  举报