计算属性与监听

1、   export default {  //选项式 需要export defalut 导出

2、 data(){   //在这里定义该页面的需要数据

3、

computed: {

        youname(){  //改变计算属性中的某一个变量的值，整个计算属性的youname会自动调用，调用的方式就是，函数名字，不带括号

4、question(newQuestion,oldQuestion){//监听的函数名称必须是data()中的属性名称

<template>

    <div class="">

        <!-- count:{{count}} -->

        count: {{count}}

        <NButton @click="increment()" > 自增</NButton>

        youname:{{youname}}//自动变化

        <NButton @click="changfullname('asdfdsf ewrewr')" > 改变名字</NButton> &nbsp;&nbsp;&nbsp;&nbsp;

        <NButton @click="changfullname2('asdfdsf ewrewr')" > 改变firstname自动触发computed属性yourname</NButton><br/>

        this use watch 改变数据  &nbsp;&nbsp;&nbsp;&nbsp; 问题:{{question }}   &nbsp;&nbsp;&nbsp;&nbsp;答案:{{answer}}

        <NButton @click="changeQuestion()" > 监听question变化</NButton><br/>

    </div>

</template>

<script >

import { useRoute } from "vue-router";

import { NButton } from "naive-ui";

   export default {  //选项式 需要export defalut 导出

       name:'option1',

       data(){   //在这里定义该页面的需要数据

           return{

               count:0,

               firstName:'zhongghuo',

               lastName:'tianian',

               fullname: '',

               question:'this is question',

               answer:'this is answer'

           }

       },

    methods: {

        increment(){

            // this.count++

            this.count = this.count+2;

        },

        changfullname(newval){

            this.fullname = newval;

        },

        changfullname2(newval){

            this.firstName = newval;

        },

        changeAnswer(newval){

            this.answer = 'question newval'+newval+"answer";

        },

        changeQuestion(){

            this.question='88888888';

        }

    },

    computed: {

        youname(){  //改变计算属性中的某一个变量的值，整个计算属性的youname会自动调用，调用的方式就是，函数名字，不带括号

            return this.firstName+":"+this.lastName;

        },

        fullname:{

            get(){

                return this.firstName + ' ' + this.lastName

            },

            set(newval){

                const names = newValue.split(' ');

                this.firstName = names[0];

                this.lastName = names[names.length - 1];

            }

           

        }

    },

    watch:{

        question(newQuestion,oldQuestion){//监听的函数名称必须是data()中的属性名称

            console.log(newQuestion);

            this.changeAnswer(newQuestion);

        }

    }

   }

</script>

<style  scoped>

</style>