vue简单使用四（计算属性、过滤器、侦听器和生命周期）-CSDN博客

本文链接：https://blog.csdn.net/weixin_41670405/article/details/137645210

计算属性：

查看arrs这个数组的长度：

输出结果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div class="vuePro">
          <!-- 计算属性 -->
         <div>
             <div>数组内容：{{arrs}}</div>
             <duv>当前数组的长度：{{arrsLength}}</duv>
         </div>
    </div>
</body>
<script>
    new Vue({
        el:".vuePro",
        data:{
            arrs:[1,2,3,4,5]
        },
        computed:{
           arrsLength(){
               return this.arrs.length;
           }
        }
    });
</script>
</html>

侦听器：

打印结果：记得在输入框中输入内容

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div class="vuePro">
          <!-- 侦听器 -->
         <div>
             <input type="text" v-model="firstName" />
             <input type="text" v-model="lastName" />
             <div>{{fullName}}</div>
         </div>
    </div>
</body>
<script>
    new Vue({
        el:".vuePro",
        data:{
            firstName:"李",
            lastName:"靖",
            fullName:"李 靖"
        },
        watch:{
            firstName(val){  // 跟变量名称一致
                this.fullName = val + "" + this.lastName;
            },
            lastName(val){
                this.fullName = this.firstName + ' ' + val;
            },
        }
    });
</script>
</html>

过滤器：

输入的英文全部变大或者全部变小

打印结果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div class="vuePro">
          <!-- 过滤器 -->
         <div>
             <input type="text" v-model="msg" />
             <!-- 字母全部变成大写 -->
             <div>{{msg | upper}}</div>
             <!-- 字母全部变成小写 -->
             <div>{{msg | lower}}</div>
         </div>
    </div>
</body>
<script>
    Vue.filter("lower",function (val) { // 全局过滤器
        return val.toLowerCase();
    });
    new Vue({
        el:".vuePro",
        data:{
            msg:""
        },
        filters:{
            upper(val){  // 局部过滤器
                return val.toUpperCase();
            }
        }
    });
</script>
</html>

生命周期：

数据初始化时就能为变量赋值

打印结果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div class="vuePro">
         <div>{{list}}</div>
    </div>
</body>
<script>

    new Vue({
        el:".vuePro",
        data:{
           list:[]
        },
        mounted(){
            var resu = [1,2,1,4,5];
            this.list = resu;
        }
    });
</script>
</html>