vue的computed、watch和methods

参考:传送门1
传送门2
传送门3

参考了官方文档,总结如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./vue.js">script>
head>
<body>
    <div id="example">

        <input type="text" v-model="firstname">
        <input type="text" v-model="lastname">
        <input type="text" v-model="fullname">
        <input type="button" @click="getFullname()" value="点我">
    div>
body>
<script>
var vm = new Vue({
      
        el:'#example',
        data:{
      
            firstname:'xiao',
            lastname:'ming',
            fullname:''
        },
        computed: {
      // 直接计算它下面属性,不用管他有没有被动,至于牵涉到的属性都是直接计算得的
            fullname: function () {
      
                // `this` 指向 vm 实例
                // return this.firstname.split('').reverse().join('')
                return this.firstname+this.lastname;
            }
        },
        watch:{
      // 只有有动watch下面动属性了才会触发他的操作
            fullname:function () {
      
                this.fullname = this.firstname+this.lastname;
            }
        },
        methods: {
      
            getFullname:function(){
      
                this.fullname=this.firstname+this.lastname;
            }
        }
    });

script>
html>

你可能感兴趣的:(前端)