vue计算属性写法2

<template>

    <div>

        <h2>{{ msg }}</h2>

        <p>新闻ID：{{ $route.params.newsId}}</p>

        <p>新闻标题：{{ $route.params.newsTitle}}</p>

        <label>姓:<input type="text" placeholder="请输入姓氏" v-model="firstName"/></label>

        <label>名:<input type="text" placeholder="请输入名称" v-model="lastName"/></label>

        <label>姓名:<input type="text" placeholder="请输入名字" v-model="fullNameOne"/></label>

        <p></p>

        <label>姓名:<input type="text" placeholder="请输入名字" v-model="fullNameTwo"/></label>

    </div>

</template>

<script>

export default {

  name: 'Params',

  data () {

    return {

      msg: 'params page',

      firstName: '',

      lastName: '',

      fullNameThree: ''

    }

  },

  computed: {

    fullNameOne: {

      get () {

        return this.firstName + '.' + this.lastName

      }

    },

    fullNameTwo: {

      get: function () {

        console.log(`调用了fullnametwo的get方法`)

        return this.firstName + '.' + this.lastName

      },

      set: function (value) {

        console.log(`调用了fullNameTwo的set方法，值:${value}`)

        let names = value.split('.')

        console.log(names)

        this.firstName = names[0]

        this.lastName = names[1]

      }

    }

  }

}

</script>