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>作业5</title>
</head>
<body>
    <!--3 将模型数据和视图进行绑定-->
    <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>
<!--1 引入js文件-->
<script src="js/vue.js"></script>
<!--2 定义Vue对象，初始化模型数据-->
<script>
    new Vue({
        el:"#app", //定义Vue控制的区域
        data:{
            user:{
                name: "", //姓名
                age: "",  //年龄
                gender: "", //性别
                hobby: []   //由于爱好可能存在多个,使用数组封装          
            }
        },
        methods: {
            fn() {
                alert("uesr.name,user.age,uesr.gender,user.hobby");
                console.log(this.user);
            }
        }
    });
    
</script>
</body>
</html>
要在JavaScript中输出字符串，可以使用console.log()函数来打印字符串。在Vue中，也可以使用{{ }}插值表达式在HTML模板中输出字符串。
<p>例如，在Vue对象的methods属性中的fn()方法中，可以使用console.log()打印字符串：</p>
<pre><code class="language-javascript">methods: {
    fn() {
        console.log(&quot;Hello, world!&quot;);
    }
}
</code></pre>
<p>在HTML模板中，可以使用{{ }}插值表达式来输出字符串：</p>
<pre><code class="language-html">&lt;p&gt;{{ &quot;Hello, world!&quot; }}&lt;/p&gt;
</code></pre>
<p>这样就可以在控制台或页面上输出字符串了。</p>