Vue入门 - 3 数据绑定

最新推荐文章于 2023-11-28 17:31:03 发布

文刀_刘

最新推荐文章于 2023-11-28 17:31:03 发布

阅读量227

点赞数

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

本文链接：https://blog.csdn.net/qq_43584064/article/details/120590566

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、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>

文刀_刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"> <
复制链接

扫一扫