• 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>
  • 相关阅读:
    MyBatis学习笔记
    【Ts 5】Httpclient的应用和封装
    【drp 12】再识转发和重定向:SpringMVC无法跳转页面
    【多线程 5】线程池的类型以及submit()和execute()的区别
    【多线程 5】线程池的类型以及submit()和execute()的区别
    【多线程 4】多线程实例(实例分析博客在下一篇)
    【多线程 4】多线程实例(实例分析博客在下一篇)
    【多线程 3】多线程间的变量共享方式
    【多线程 3】多线程间的变量共享方式
    【多线程 2】常见的多线程创建方式
  • 原文地址:https://www.cnblogs.com/xiaobaizitaibai/p/16836660.html
Copyright © 2020-2023  润新知