Vue数据绑定

最新推荐文章于 2022-09-22 10:00:28 发布

魂&梦

最新推荐文章于 2022-09-22 10:00:28 发布

阅读量95

点赞数

分类专栏： Vue 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44564263/article/details/126089707

版权

Vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href；

特点：数据只能从 data 流向页面；

双向数据绑定

语法：v-mode:value="xxx"或简写为 v-model="xxx" 因为v-model默认收集value值，一般都是应用在表单类元素上（如：input、select等）；

特点：数据不仅能从 data 流向页面，还能从页面流向 data；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Vue数据绑定</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body> 
        <!-- 准备一个容器 -->
        <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>
        <script type="text/javascript" >
        Vue.config.productionTip=false;//阻止 vue 在启动时生成生产提示。
       new Vue({
        el:'#root',
        data:{
            name:'广州'
        }
       })
        </script>
    </body>
</html>

演示结果：