VUE计算属性和监听

最新推荐文章于 2024-08-22 13:41:17 发布

胡先生的博客

最新推荐文章于 2024-08-22 13:41:17 发布

阅读量133

点赞数

文章标签： vue html css vue.js

本文链接：https://blog.csdn.net/weixin_47683287/article/details/109325136

版权

vue计算属性和监听

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="app">
            <!-- 实现反转meg过程 -->
            <div>{{meg.split("").reverse().join("")}}</div>
            <!-- 由于反转meg的过程，很长，在布局中很难看，所以用计算属性(computed)，进行简化 -->
            <div>{{reversedString}}</div>
            <!-- 通过计算属性，将原来很长的计算过程，封装在属性computed中，是页面简化，就是把计算过程隐藏代替(看起来页面简单) -->
            
            <div>
                <input type="text" v-model = 'text'>
                <input type="text" v-model = 'texr'>
                <span>{{tyop}}</span>
            </div>

        </div>
        
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    text:'Tom',
                    texr:'jimi',
                    meg:'hellow',
                    tyop:'',
                },
                // 计算属性(computed)：将计算过程简化代替，呈现在页面中
                computed:{
                    reversedString:function(){               //算法名(自定义)：function(){ 相应计算过程 }
                        return this.meg.split("").reverse().join("");
                    }
                },
                // 事件的监听属性(watch)：监听数据，当数据发生一定程度变化时，触发相应的方法
                watch:{
                    text:function(val){
                        this.tyop = val + '' + this.texr; 
                    },
                    texr:function(val){
                        this.tyop = this.text + '' + val; 
                    }      
                },
               
            })
        </script>
    </body>
</html>