vue计算属性 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 
 8 </head>
 9 <body >
10 <div id="app">
11     <!--静态传递数据-->
12      <my-component message="hello" name="刘二狗" age="18"></my-component>
13 </div>
14 </body>
15 
16 <script>
17     Vue.component('my-component',{
18         //子组件使用父组件的数据 message  name  age
19         props:['message','name','age'],
20         //用data选项对数据进行处理
21         data:function(){
22           return{
23               message1: this.message +'用data选项对数据进行处理'
24           }
25         },
26         //用计算属性选项对数据进行处理
27         computed:{
28             message2:function(){
29                 return this.message + '用计算属性选项对数据进行处理'
30             }
31         },
32         template:'<div>' +
33                     '<span>{{message1}}</span><br>'+
34                     '<span>{{message2}}</span><br>'+
35                     '<span>{{message}}  {{name}}今年{{age}}了</span><br>'+
36                  '</div>'
37     })
38     new Vue({
39         el:'#app'
40     })
41 </script>
42 </html>
43 　　

 

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

</head>
<body >
<div id="app">
    <!--静态传递数据-->
     <my-component message="hello" name="刘二狗" age="18"></my-component>
</div>
</body>

<script>
    Vue.component('my-component',{
        //子组件使用父组件的数据 message  name  age
        props:['message','name','age'],
        //用data选项对数据进行处理
        data:function(){
          return{
              message1: this.message +'用data选项对数据进行处理'
          }
        },
        //用计算属性选项对数据进行处理
        computed:{
            message2:function(){
                return this.message + '用计算属性选项对数据进行处理'
            }
        },
        template:'<div>' +
                    '<span>{{message1}}</span><br>'+
                    '<span>{{message2}}</span><br>'+
                    '<span>{{message}}  {{name}}今年{{age}}了</span><br>'+
                 '</div>'
    })
    new Vue({
        el:'#app'
    })
</script>
</html>
　　

 

posted @ 2017-11-08 17:28  凯尔Grant  阅读(111)  评论(0)    收藏  举报