vue学习---v-model双向数据绑定(应用在表单类元素)

2021-10-28 08:32:24 阅读：141 来源： 互联网

Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue中有2种数据绑定的方式：
                    1.单向绑定(v-bind)：数据只能从data流向页面。
                    2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
                        备注：
                                1.双向绑定一般都应用在表单类元素上（如：input、select等）
                                2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
         -->
        <!-- 准备好一个容器-->
        <div id="root">
            <!-- 普通写法 -->
            <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
            双向数据绑定：<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>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            }
        })
    </script>
</html>

标签：vue,数据,绑定,---,Vue,双向,model,data
来源： https://www.cnblogs.com/leiyanting/p/15473830.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue学习---v-model双向数据绑定(应用在表单类元素)