vue数据绑定

最新推荐文章于 2023-04-06 23:19:31 发布

我的时区

最新推荐文章于 2023-04-06 23:19:31 发布

阅读量78

点赞数

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

本文链接：https://blog.csdn.net/The_Road_of_Java/article/details/121936234

版权

笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <!-- vue中的两种数据绑定方式：
        1.单向绑定（v-bind）：数据只能从data流向页面。
            v-bind可简写为: :。（一个冒号）
        2.双向绑定（v-model）：数据不仅能从data流向页面，也能从页面流向data。
            双向绑定一般应用于表单类元素上面（带value属性的）
            v-model:value可简写为:v-model。 -->
    <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>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'Vue',
            }
        });
    </script>
</body>

</html>