Vue基础进阶之计算属性的使用

计算属性的基本使用

初始小示例：

Vue基础进阶之计算属性的使用

代码：

window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        msg:''
                    }
                    
                    
                    
                })
            }
            
            
        </script>
    </head>
    <body>
        <div>
            <input type="text" v-model="msg"/><br />
            原样显示：{{msg}}<br />
            大写显示：{{msg.toUpperCase()}}<br />
            
            
        </div>

直接在HTML中使用toUpperCase()方法，这样使得代码太长，影响代码的逻辑；因此就引入了计算属性的应用

Vue计算属性：

更强大的属性声明方式，可以对定义的属性进行逻辑处理与数据监视;

计算属性的使用；

https://cn.vuejs.org/v2/guide/computed.html#计算属性

Vue基础进阶之计算属性的使用

计算属性的vue代码：

<script>
            window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        msg:''
                    },
                    computed:{
                        msg1:function(){
                            
                            return this.msg.toUpperCase();
                        }
                    }
                    
                    
                    
                })
            }
            
            
        </script>

html:

<body>
        <div>
            <input type="text" v-model="msg"/><br />
            原样显示：{{msg}}<br />
            大写显示：{{msg.toUpperCase()}}<br />
              计算属性显示：{{msg1}}<br />
            
            
        </div>
    </body>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>计算属性的基本使用</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <script>
 8             window.onload = () =>{
 9                 
10                 new Vue({
11                     el:'div',
12                     data:{
13                         msg:''
14                     },
15                     computed:{
16                         msg1:function(){
17                             
18                             return this.msg.toUpperCase();
19                         }
20                     }
21                     
22                     
23                     
24                 })
25             }
26             
27             
28         </script>
29     </head>
30     <body>
31         <div>
32             <input type="text" v-model="msg"/><br />
33             原样显示：{{msg}}<br />
34             大写显示：{{msg.toUpperCase()}}<br />
35               计算属性显示：{{msg1}}<br />
36             
37             
38         </div>
39     </body>
40 </html>

计算属性的基本使用