Vue 姓名案例

来自姬鸿昌的知识库
跳到导航 跳到搜索

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18

姓名案例

一个输入框输入姓，一个输入框输入名，然后要在页面上显示“姓-名”

插值语法实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_插值语法实现</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        姓：<input type="text" name="" id="" v-model="firstName"><br>
        名：<input type="text" name="" id="" v-model="lastName"><br>
        姓名：<span>{{firstName}}-{{lastName}}</span><br>
        需求一：不管输入几位，只要三位：<span>{{firstName.slice(0, 3)}}-{{lastName.slice(0, 3)}}</span>
        <!-- 上面这种也可以实现，但如果要求对输入值进行更复杂的操作后再回显到页面上的情况下，这种写法就违反了官方风格指南中提到的 
         模板中简单的表达式
         https://v2.cn.vuejs.org/v2/style-guide/#%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%AE%80%E5%8D%95%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90
         -->
     </div>
</body>
<script type="text/javascript">
new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三'
    }
})
</script>
</html>

methods 实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_methods实现</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        姓：<input type="text" name="" id="" v-model="firstName"><br>
        名：<input type="text" name="" id="" v-model="lastName"><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
     </div>
</body>
<script type="text/javascript">
new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三'
    },
    methods:{
        fullName(){
            console.log('fullName……');
            return this.firstName + '-' + this.lastName
        }
    }
})
</script>
</html>

注意：从这个案例里，证明只要 data 中的数据发生改变，Vue 一定会重新解析模板

另外：可以这么写，但效率不高（页面上有多少处使用了 fullName 的插值表达式，methods 里的 fullName 方法就会调用多少次），下一节会介绍更好的实现方式。

取自“https://www.jihongchang.top/index.php?title=Vue_姓名案例&oldid=8198”