Vue入门 - 3 数据绑定

2021/10/3 6:14:41

编程Tag： vue 数据 data 页面入门绑定单项

本文主要是介绍Vue入门 - 3 数据绑定，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

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

一、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入门 - 3 数据绑定的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue入门 - 3 数据绑定

文章目录

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

二、代码

相关编程文章