初学Vue--实现字符串拼接三种方法（名称案例）

最新推荐文章于 2025-03-24 15:59:21 发布

yueliang0000

最新推荐文章于 2025-03-24 15:59:21 发布

阅读量1w

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/yueliang0423/article/details/103505572

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文针对Vue初学者，介绍了通过computed属性、keyup事件以及watch监听来实现字符串拼接的三种方法，帮助理解Vue中不同场景下的字符串操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、computed

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>名称案例</title>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">

        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:''
            },
            methods:{},
            computed:{//可定义一些属性，计算属性，本质是一个方法，在使用时把他们的名称当做属性来使用，并不会当做方法调用
                //注意：1、计算属性引用时，不加（），当做普通属性
                //2、只要计算属性function内部所用到的任何data中数据发生变化，立客重新计算
                //3、计算属性的求值结果会被缓存起来，方便下次直接使用，如果依赖的所有data不变，不会重新计算
                'fullname':function(){
                    return this.firstname + '-' + this.lastname
                }
            }
        });
    </script>
</body>
</html>

2、keyup

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>名称案例</title>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">

        <input type="text" v-model="firstname" @keyup="getFullname">+
        <input type="text" v-model="lastname" @keyup="getFullname">=
        <input type="text" v-model="fullname">

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:'',
                fullname:''
            },
            methods:{
                getFullname(){
                    this.fullname=this.firstname + '-' + this.lastname;
                }
            }
        });
    </script>
</body>
</html>

3、watch

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>名称案例</title>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">

        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:'',
                fullname:''
            },
            methods:{},
            watch:{//监视data中指定数据的变化，然后触发watch中对应的function
                'firstname':function(newVal,oldVal){//属性名有-，必加引号
                    // this.fullname = this.firstname + '-' + this.lastname
                    this.fullname = newVal + '-' + this.lastname
                },
                'lastname':function(newVal){
                    this.fullname = this.firstname + '-' + newVal
                }
            }
        });
    </script>
</body>
</html>