其他分享
首页 > 其他分享> > Vue入门 - 3 数据绑定

Vue入门 - 3 数据绑定

作者：互联网

文章目录

一、1.Vue的两种绑定方式

 1 单项绑定（v-bind）: 数据只能从data流向页面
 2 双向绑定（v-model）:数据不仅能从data流向页面 还能从页面流向data

注： v-model只能用在表单类元素（输入元素） 上

二、代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js//vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 
        Vue中有两种绑定方式：
            1 单项绑定（v-bind）: 数据只能从data流向页面
            2 双向绑定（v-model）:数据不仅能从data流向页面 还能从页面流向data
     -->
    <div id="root">
        <!-- 单项数据绑定<input type="text" v-bind:value="name"><br>
        单项数据绑定<input type="text" v-model:value="name"> -->

        <!-- 简写 -->
        单项数据绑定<input type="text" :value="name"><br>
        双项数据绑定<input type="text" v-model="name">

        <!-- 下面代码报错 v-model只能用在表单类元素（输入元素） 上  -->
        <!-- <h2 v-model:x="name"></h2> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{ 
          name:'张三'
        }
    })
</script>
</html>

标签：Vue,单项,入门,数据,绑定,data,页面
来源： https://blog.csdn.net/qq_43584064/article/details/120590566