首页 > 其他分享 >vue中的计算属性

vue中的计算属性

时间:2022-10-28 17:00:41浏览次数:57  
标签:el arr vue firstNam get lastName 计算 fullName 属性

<!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>

 

标签:el,arr,vue,firstNam,get,lastName,计算,fullName,属性
From: https://www.cnblogs.com/xiaobaizitaibai/p/16836660.html

相关文章

  • 16_Vue列表渲染中key的工作原理和虚拟DOM对比算法
    key的作用粗略的讲,key的作用就是给节点设置一个唯一的标识就像我们人类社会中,每个人的身份证号一样在大部分对key要求不是很严格的场景下,使用index作为key是没问......
  • 13_Vue中的计算属性
    需求两个输入框下方一个全名要求输入框内容发生变化的时候,全名也跟着变化用计算属性很快能写出来,我们先用插值语法和methods配置项完成methods和插值语法方法1使......
  • uniapp开发使用 web-view APP 与 H5 (vue)通信
    需求:这边是uniapp开发的APP 需要内嵌H5(vue),就得使用web-view跳转网页H5端在vue的index,html文件引入web-view的插件<scripttype="text/javascript"src="https://js......
  • 14_Vue监视属性
    顾名思义,监视一个属性的变化需求按照之前案例,isHot的值发生改动的时候我需要知道这件事,isHot发生改变,就需要通知我watchkey值:你想监视的属性名(data配置项中的isHot......
  • C# 反射动态判断转换属性类型值生成类实例
    ///<summary>///为指定对象分配参数///</summary>///<typeparamname="T">待赋值的类型</typeparam>///<paramname="dic">字段/值</param>/......
  • 边缘计算协同人工智能 赋能工业智能化场景
    工信部《“十四五”智能制造发展规划》中提到的,到2025年规模以上制造业企业基本普及数字化,智能制造装备国内满足率超70%。工业互联网(IndustrialInternet)的加速发展,带来新一......
  • 创建使用Ant的vue项目时遇到的问题
    一、成功运行后vue版本   二、创建中遇到的问题    1、开始创建项目时,vue、ant、webpack(8.15.0)都是高版本,ant1.7.8版本的代码不能适用(需求为:学习ant1.......
  • Java 根据出生日期计算年龄
    直接上代码:/***根据出生日期,计算用户年龄*@parambirthDay*@return*/publicstaticintgetAgeByBirth(DatebirthDay)throwsParseEx......
  • 2022-2023-1 20221307 《计算机基础和程序设计》第九周学习总结
    作业信息这个作业属于那个班级 https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业要求 https://www.cnblogs.com/rocedu/p/9577842.html#WEEK09作业目标学习......
  • vue 中的键盘事件
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......