Vue自学之—计算属性_计算属性输入与输出联动的方法-CSDN博客

本文链接：https://blog.csdn.net/u011150251/article/details/129680247

一、案例引入

需要实现以上的联动效果，可以使用如下的几种方式：

1.1、使用插值语法实现

具体如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用插值语法实现联动效果</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .container{
            width: 260px;
            height: 140px;
            box-shadow: 0px 0px 5px gray;
            padding: 30px 0 0 30px;
        }
    </style>
</head>
<body>

    <div id="box">
        <div class="container">
            姓：<input type="text" v-model="firstName" placeholder="请输入姓"><br><br>
            名：<input type="text" v-model="lastName" placeholder="请输入名"><br><br>
            <p>姓名：{
  {firstName}}-{
  {lastName}}</p>
        </div>

    </div>

    <script type="text/javascript">
        // 不显示生产环境提示
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#box',
            data:{
                'firstName':'李',
                'lastName':'小龙'
            }
        });

    </script>

</body>
</html>

1.2、使用methods实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用methods实现联动效果</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .container{
            width: 260px;
            height: 140px;
            box-shadow: 0px 0px 5px gray;
            padding: 30px 0 0 30px;
        }
    </style>
</head>
<body>

    <div id="box">
        <div class="container">
            姓：<input type="text" v-model="firstName" placeholder="请输入姓"><br><br>
            名：<input type="text" v-model="lastName" placeholder="请输入名"><br><br>
            <!--
                插值语法中可以放一个函数，如果不加小括号“()”，则显示的是函数内容
                如果加了小括号“()”，则就是显示函数的返回值（如果函数有返回值的话）
            -->
            <p>姓名：{
  {fullName()}}</p>
        </div>

    </div>

    <script type="text/javascript">
        // 不显示生产环境提示
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#box',
            data:{
                'firstName':'李',
                'lastName':'小龙'
            },
            methods:{
                fullName(){
                    return this.firstName + "-" + this.lastName;
                }
            }
        });

    </script>

</body>
</html>

在使用插值语法的时候，可以直接插入一个函数名，如果这个函数有返回值，且在插值的双括号内写函数名时有小括号，则是取函数的返回值；而如果不写小括号，则是显示整个函数。