Vue学习笔记——computed计算属性(用三种方法实现姓名的拼接，及其区别)

一.姓名案例效果

需要实现的效果：输入姓和名，动态的显示全名

修改前


修改后

1.姓名案例，用插值语法实现

<div class="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名: <span>{
  {firstName.slice(0,3)}}-{
  {lastName}} </span>
        <!-- slice(0,3)截取从0-3的字符 -->
 </div>

<script>
        Vue.config.produ