03_01数据绑定

最新推荐文章于 2023-02-13 18:05:30 发布

林笙10

最新推荐文章于 2023-02-13 18:05:30 发布

阅读量206

点赞数

分类专栏： Vue3.0 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46498227/article/details/119428595

版权

Vue3.0 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中的数据绑定方式，包括单向绑定(v-bind)和双向绑定(v-model)。v-bind用于从data流向页面，v-model则实现了数据的双向同步，常见于表单元素。简写形式为::value和v-model。注意v-model仅适用于表单元素，如input，不能应用于非表单元素如h2。

摘要由CSDN通过智能技术生成

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
        <script src="../js/vue.js"></script>
    </head>

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

            <!-- 简写 -->
            单向数据绑定：<input type="text" :value="name"><br/>
            双向数据绑定：<input type="text" v-model="name"><br/>
            <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上  -->
            <!-- <h2 v-model:x="name">你好啊</h2> -->
        </div>
        <script>
            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷'
                }
            })
        </script>
    </body>
</html>

总结：
Vue中有两种数据绑定的方式：
1，单向绑定（v-bind）：数据只能从data流向页面
写法：v-bind:value=“xxx”；简写形式: :value=“xxx”
2，双向绑定（v-model）:数据不仅能从data流向页面，也能从页面流向data
写法：v-model:value=“xxx”；简写形式: v-model=“xxx”
注意：
1，双向绑定一般都应用在表单类元素中（如input，select等）
2，v-model:value可以简写为v-model，因为v-model默认收集的就是value

林笙10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
03_01数据绑定

代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>数据绑定</title> <script src="../js/vue.js"></script> </head> <body> <div id="root">
复制链接

扫一扫