[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 @   夕苜19  阅读(17)  评论(0)  编辑  收藏  举报
相关博文：
· [Vue]内置指令
· [Vue3]模板语法
· VUE之v-model
· Vue数据绑定
· 双向绑定-了解v-model指令的用法
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛