vue.js基础知识篇(3):计算属性、表单控件绑定

为了避免过多的逻辑造成模板的臃肿不堪，可使用计算属性来简化逻辑。

1.什么是计算属性

<!DOCTYPE html>

<html lang="en"><head>  
<meta charset="UTF-8">  
<title>Title</title>
</head>
<body>  
<div id="example">      
<input type="text" v-model="didi"/>      
<input type="text" v-model="family"/>      
<br/>       
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}   

</div>    <script src="js/vue.js"></script> 
<script>      
var vm=new Vue({         
        el:"#example",         
       data:{               
          didi:"didi",              
          family:"family"           
       },           
       computed:{             
//一个计算属性的getter              
            didiFamily:{                 
               get:function(){                      
//this 指向vm实例                     
return this.didi+this.family;         
                     }            
                 }           }     
              })  
</script>

</body>
</html>

当vm.didi和vm.family的值发生变化时，vm.didiFamily的值会自动更新，当然也会同步到DOM元素上。

2.计算属性的性能分析

第五章:表单控件绑定

1.v-model更新表单控件的基本例子

这些基本例子，直接使用value属性，绑定的都是字符串或者checkbox的布尔值。接下来分别介绍。

(1)文本框的使用

当用户操作文本框时，vm.name会自动更新为用户输入的值，同时span也会改变。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="demo">        <span>Welcom,{{name}}!join DDFE</span>        <br/>        <input type="text" v-model="name" placeholder="join DDFE"/>    </div>    <script src="js/vue.js"></script>    <script>        var vm=new Vue({            el:"#demo"        })    </script></body></html>

textInput使用v-model