Vue—数据绑定

最新推荐文章于 2025-04-23 09:45:21 发布

原创最新推荐文章于 2025-04-23 09:45:21 发布 · 109 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

Vue学习专栏收录该内容

63 篇文章

订阅专栏

文章展示了Vue.js中如何进行单项和双向数据绑定，使用了`:value`和`v-model`指令，强调`v-model`只适用于表单元素。

<body>
    <!--普通写法-->
    <!-- <div id="root">
        单项数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>
    </div> -->
    <!--简写-->
    <div id="root">
        单项数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model:="name"><br/>
    </div>

    <!--v-model只能应用在表单类元素上-->
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'Gui'
        }
    })
</script>