Vue（2）函数初识，与computed的使用

序

在实例vue对象时候，可以选择使用computed来完成计算,mvvm是mode，view，viewmode实现数据的双向绑定，这也体现其的便捷性。

示例代码

点击查看代码

<div id="app">
	<input type="text" v-model="bookNum" />
	<br />
	<input type="text" v-model="price" />
	<br />
	{{bookNum}}本书，单价{{price}}，
	<br />

	<button @click="bookNum++">加量</button>
	<button @click="price++">加价</button>
	<br>
	一共要：{{getAllprice}}元
</div>

  </body>
    <script>

    	var vm = new Vue({
    		el:"#app",
    		
    		data:{
    			bookNum:1,
    			price:35,
    		},
    		methods:{
    			count:function(){
    				this.countMoney=this.price*this.bookNum;
    			}
    		},
    		computed:{
    			getAllprice:function(){
    				return this.price*this.bookNum
    			}
    		},
    		
    		

    	})
    	

    </script>

  

界面效果

知识点

1. v-mode 例子：input type="text" v-model="price" 数据绑定，可以实时修改
2. computed 专门用于计算
3. v-on：click 调用函数