Vue.js 用户信息表单 - 模型数据绑定与视图更新 - 常规

<!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>Vue.js 用户信息表单</title>
</head>
<body>
    <div id="app">
        <p>输入的姓 名是：{{user.name}}</p>
        <p>输入的年 龄是：{{user.age}}</p>
        <p>选择的性 别是：{{user.gender}}</p>
        <p>选择的爱 好是：{{user.hobby}}</p>
<pre><code>    &lt;hr&gt;
    
    &lt;form action=&quot;&quot;&gt;
        姓名:&lt;input type=&quot;text&quot; v-model=&quot;user.name&quot;&gt;&lt;br&gt;&lt;br&gt;

        年龄:&lt;input type=&quot;text&quot; v-model=&quot;user.age&quot;&gt;&lt;br&gt;&lt;br&gt;

        性别:&lt;input type=&quot;radio&quot; value=&quot;man&quot; v-model=&quot;user.gender&quot;&gt;男
            &lt;input type=&quot;radio&quot; value=&quot;woman&quot; v-model=&quot;user.gender&quot;&gt;女&lt;br&gt;&lt;br&gt;
            
        爱好:&lt;input type=&quot;checkbox&quot; value=&quot;sing&quot; v-model=&quot;user.hobby&quot;&gt;唱
            &lt;input type=&quot;checkbox&quot; value=&quot;dance&quot; v-model=&quot;user.hobby&quot;&gt;跳
            &lt;input type=&quot;checkbox&quot; value=&quot;basketball&quot; v-model=&quot;user.hobby&quot;&gt;篮球&lt;br&gt;&lt;br&gt;
            
            &lt;input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;保存&quot; @click=&quot;fn&quot;&gt;
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app", //定义Vue控制的区域
        data:{
            user:{
                name: "", //姓名
                age: "",  //年龄
                gender: "", //性别
                hobby: []   //由于爱好可能存在多个,使用数组封装          
            }
        },
        methods: {
            fn() {
                alert("保存按钮被点击");
                console.log(this.user);
            }
        }
    });
</script>
</body>
</html>