vue样式操作与事件绑定

1 Vue实例（VM）

var vm = new Vue({
    el:'#app', //挂载元素
    
    //数据
    data: {
        title:'值',
        ....
        dataList:[]
    },
    
    //方法
    methods: {
        方法名: function(){
    
        },
         ...
    },
        
    //计算属性
    computed: {
        属性名： function(){
            return 值
        }  
    }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>computed</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <div>
10             姓：<input type="text" v-model='first_name' />
11         </div>
12         <div>
13             名：<input type="text" v-model='last_name' />
14         </div>
15         <!-- <p>姓名：{{ full_name() }}</p> -->
16         <!-- 采用计算方式的变量可以不在data中赋初值 -->
17         <p>姓名：{{ full_name }}</p>
18     </div>
19 </body>
20 <script type="text/javascript" src="js/vue.js"></script>
21 <script type="text/javascript">
22     var app = new Vue({
23         el: '#app',
24         data: {
25             first_name: '',
26             last_name: ''
27         },
28         // methods: {
29         //     full_name: function () {
30         //         return this.first_name + " " + this.last_name;
31         //     }
32         // },
33         // 一个变量依赖于多个变量，一般对该变量采用计算处理
34         computed: {
35             full_name: function () {
36                 return this.first_name + " " + this.last_name;
37             }
38         }
39     })
40 </script>
41 
42 </html>

computed

1 Vue实例 （VM）

1 Vue实例（VM）