vue-计算属性computed

vue-computedvar vue;$(function(){//初始化vuevue = new Vue({el:"#app",data:{num: 0,price: 2,

咩咩文

5712人浏览 · 2017-02-27 16:07:52

咩咩文 · 2017-02-27 16:07:52 发布

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>vue-computed</title>
		<link rel="stylesheet" href="css/mui.css" />
		<script type="text/javascript" src="js/mui.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
         var vue;
         $(function(){
         	//初始化vue
         	vue = new Vue({
         		el:"#app",
         		data:{
         			 	num: 0,
	    				price: 2,	
         		},
                methods:{
                	doBtn:function(){
                		alert("总金额:"+this.num*this.price);
                	}
                },
                computed:{//计算属性
                	totalPrice:function(){
                		 return this.num*this.price;
                	}
                }
         	});
         });
		</script>

	</head>

	<body>
		<div id="app">
		单价:<input  type="text" v-model="price" disabled="disabled"/>
      	 请输入数量:<input  type="text" v-model="num"/>
      	 总金额:{{totalPrice}}
      	<button type="button" @click="doBtn" class="mui-btn mui-btn-primary">提交</button>
      	</div>
	</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^