添加案例

2 years ago · 5b450a3f80
parent ebc6b2c321
commit 5b450a3f80
2 changed files with 71 additions and 0 deletions
--- a/08_计算属性/3.姓名案例_计算属性实现.html
+++ b/08_计算属性/3.姓名案例_计算属性实现.html
@ -0,0 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>3.姓名案例_计算属性实现</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    姓名： <span>{{fullName}}</span>
 </div>
 <script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: "张",
            lastName: "三"
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + '-' + this.lastName
                },
                set(value){
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
    console.log(vm)
 </script>
 </body>
 </html>
--- a/08_计算属性/4.姓名案例_计算属性简写.html
+++ b/08_计算属性/4.姓名案例_计算属性简写.html
@ -0,0 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>4.姓名案例_计算属性简写</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    姓名： <span>{{fullName}}</span>
 </div>
 <script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: "张",
            lastName: "三"
        },
        computed: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
    console.log(vm)
 </script>
 </body>
 </html>