03.数据绑定

最新推荐文章于 2024-02-10 11:24:33 发布

M丶GentleMan

最新推荐文章于 2024-02-10 11:24:33 发布

阅读量40

点赞数

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

本文链接：https://blog.csdn.net/ma628991/article/details/121367907

版权

Vue学习专栏收录该内容

18 篇文章 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 type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 常规写法 -->
        单项数据绑定<input type="text" :value='name'><br>
        双项数据绑定<input type="text" v-model='name'><br>

        <!-- 简写 -->
        <!-- v-model:value,默认收集的是value，所以可以简写：v-model -->
        单项数据绑定简写<input type="text" :value='name'><br>
        双项数据绑定简写<input type="text" v-model:value='name'>

        <!-- 下面的写法是错的，双向数据绑定，只适用于表单类元素中（输入类元素） -->
        <!-- <h1 v-model:x='name'>Hellow</h1> -->
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                name: 'vue学习'
            }
        })
    </script>
</body>

</html>