四、数据绑定————温开水的复习笔记

Vue的两种数据绑定方式

示例代码

<!DOCTYPE html>
<html">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <!--  引入vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="root">
        单向数据绑定:<input type="text" v-bind:value="name"><br>
        双向数据绑定:<input type="text" v-model:value="name">
        <!-- 下面的代码是错误的 -->
        <h2 v-model:x="name">name</h2>
    </div>

    <script type="text/javascript">
        //创建vue实例
        const vm = new Vue({
            el:'#root',  
            data:{
                name:"温开水",
                other:{           
                    url:"https://cn.vuejs.org",
                    name:"vue"
                }
                
            }
        });

    </script>
</body>
</html>

0 条评论