• vue中的计算属性


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="../js/vue.js"></script>
    
        <title>Document</title>
    </head>
    <body>
        <div id="root"><input type="text" v-model="firstNam" ><br><input type="text" v-model="lastName"><br>
           全名 <span>{{fullName}}</span>
        </div>
        <script>
            const vm=new Vue({
                el: "#root",
                data: {
                    firstNam: "",
                    lastName:""
                },
                computed:{
                    fullName:{
                        //当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
                        //初次读取fullName会被调用get ,所依赖的数据发生变化的时候get也重新调用
                         get(){
    
                             return this.firstNam+"-"+this.lastName;
                         },
                         //set当fullName被修改时
                         set(value){
                            const arr=value.split("-");
                            this.firstNam=arr[0];
                            this.lastName=arr[1];
                         }
                    }
                }
             
    
            })
        </script>
    </body>
    </html>

    插值法实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="../js/vue.js"></script>
    
        <title>Document</title>
    </head>
    <body>
        <div id="root"><input type="text" v-model="firstNam" ><br><input type="text" v-model="lastName"><br>
           全名 <span>{{firstNam}}-{{lastName}} </span>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    firstNam: "",
                    lastName:""
                }
    
            })
        </script>
    </body>
    </html>

    methods实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="../js/vue.js"></script>
    
        <title>Document</title>
    </head>
    <body>
        <div id="root"><input type="text" v-model="firstNam" ><br><input type="text" v-model="lastName"><br>
           全名 <span>{{fullName()}} </span>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    firstNam: "",
                    lastName:""
                },
                methods:{
                    fullName(){
                        return this.firstNam+"-"+this.lastName;
                    }
                }
    
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    顺序表与链表
    Python SQL相关操作
    Python 数据分析练习1
    Python 操作MySQL数据库
    Python 乘法口诀表
    Python 导出数据from Mysql
    Python subplot 绘画
    Shell 自定义函数
    Shell 双括号概述
    Shell for、while循环
  • 原文地址:https://www.cnblogs.com/xiaobaizitaibai/p/16836660.html
Copyright © 2020-2023  润新知