zoukankan      html  css  js  c++  java
  • vue4-计算属性

    类里有个computed和methods相识,但是computed里的函数计算后会缓存结果,methods的每次都会重新计算。

    在模板语法复杂时就把它写入computed属性中,起到分离复杂逻辑的作用(是属性所以调用时不加())

    <!DOCTYPE html>
    <html>
        <head>
            
            <meta charset="utf-8">
            <title>vue1</title>
            <script src="vue.js"></script>
            <link rel="stylesheet" type="text/css" href="vue.css">
        
        </head>
        <body>
            
            
            <div id="app">
                <div id="test">{{test}}</div>
                <div v-html="chazhi"></div>
                <div>{{remsg}}</div>
    
                <div>
                    <input type="text" v-model="msg">
                    <button @click="submit">submit</button>
                    <ul>
                        <li v-for="item of list">{{item}}</li>
                    </ul>
                </div>
            </div>        
            <script>
                var app=new Vue({
                    el:"#app",
                    data:{
                        test:'我是test',
                        chazhi:`<div>chzhi context</div>`,
                        list:[],
                        msg:""
                    
                    },
                    methods:{
                        demo:function(){
    
                        },
                        submit:function(){
                            this.list.push(this.msg),
                            this.msg=""
                        }
    
                
    
                    },
                    computed:{
                        remsg:function(){
                            return this.chazhi.split('').reverse().join('')
                        }
    
                    },
                    beforeCreate:function(){
                            console.log("我是挂载函数")
                        }
                    
                })        
            </script>
        </body>
    </html>
  • 相关阅读:
    CPU
    CentOS7 Tomcat 环境部署
    CentOS7 NTP 安装配置
    CISCO VLAN ACL
    ESXI6.0启用 snmp
    编译安装 varnish-4.1.2和yum 安装 varnish-4.0.3
    CentOS7 安装中文帮助手册
    CentOS7 学习笔记
    CentOS7 编译安装 nginx-1.10.0
    CentOS7 cacti 安装
  • 原文地址:https://www.cnblogs.com/JinweiChang/p/12626222.html
Copyright © 2011-2022 走看看