lovecoding
/
VIP23


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app" >
        <p>姓：{{firstName}}</p>
        <p>名：{{lastName}}</p>
        姓：<input type="text" v-model="firstName" /><br/>
        名：<input type="text" v-model="lastName" /><br/>
        <p>全名：{{fullName}}</p>
    </div>
</body>
<script>
    var jsonParam = {
        el: "#app",
        data: {
            fullName: "",
            firstName:"百里",
            lastName:"守约"
        },
        methods:{
        },
        watch:{
            firstName:function (n,o){
                //console.log(n)
                //console.log(o)
                this.fullName = n + "-" + this.lastName;
            },
            lastName:function (n,o){
                //console.log(n)
                //console.log(o)
                this.fullName = this.firstName + "-" + n;
            }
        }
    }
    var vue = new Vue(jsonParam);

    //watch         监听属性   属性变化
    //computed      计算属性   计算  价格
    // method      方法        事件
</script>
</html>