vue-计算属性computed

最新推荐文章于 2024-05-16 12:42:35 发布

咩咩文

最新推荐文章于 2024-05-16 12:42:35 发布

阅读量5.6k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/u011659172/article/details/58129582

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

咩咩文

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue-计算属性computed

vue-computed var vue; $(function(){ //初始化vue vue = new Vue({ el:"#app", data:{ num: 0, price: 2,
复制链接

扫一扫