Vue.js基本的语法二-CSDN博客

本文链接：https://blog.csdn.net/xm_w_xm/article/details/80265951

一，控制流属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="role==='admin'||role==='cus'">
				管理员
			</div>
			<div v-else-if="role==='hr'">
				hr
			</div>
			<div v-else>
				sorry
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				role:"hr",//左侧输入什么右侧就输出相应的
			},
			
		})
	</script>
</html>

二，计算属性

练习，输入数字后，算出总成绩和平均成绩，

	<body>
		<div id="app">
			<table border="1px">
				<thead>
					<th>学号</th>
					<th>科目</th>
					<th>分数</th>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>数</td>
						<td><input type="text" v-model="core1"></td>
					</tr>
					<tr>
						<td>1</td>
						<td>理</td>
						<td><input type="text" v-model="core2"></td>
					</tr>
					<tr>
						<td>1</td>
						<td>化</td>
						<td><input type="text" v-model="core3"></td>
					</tr>
					<tr>
						<td>1</td>
						<td>总</td>
						<td>{{core1+core2+core3}}</td>
					</tr>
					<tr>
						<td>1</td>
						<td>平均</td>
						<td>{{Math.round(core1+core2+core3)/3}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		//计算属性
		var app = new Vue({
			el: "#app",
			data: {
				core1: 25,
				core2: 35,
				core3: 45,
			},

		})
	</script>

这样我们就可以看出问题了，他自动的将数值型转换成了字符串型的，所以导致没有相加而是进行了字符串的链接，这样我们看一些，而且，当我们进行运算的时候在上面写的总数，和平局数的时候太繁琐，这样我们就要进行简化，vue.js为我们提供了计算属性，

	<body>
		<div id="app">
			<table border="1px">
				<thead>
					<th>学号</th>
					<th>科目</th>
					<th>分数</th>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>数</td>
						<!--这个地方用得到了上一节'Vue.js基本的语法一'中,v-model.number将数据转化成数值型-->
						<td><input type="text" v-model.number="core1"></td>
					</tr>
					<tr>
						<td>1</td>
						<td>理</td>
						<td><input type="text" v-model.number="core2"></td>
					</tr>
					<tr>
						<td>1</td>
						<td>化</td>
						<td><input type="text" v-model.number="core3"></td>
					</tr>
					<tr>
						<td>1</td>
						<td>总</td>
						<!--我们可以将这个地方进行优化，利用computed计算属性-->
						<td>{{sum}}</td>
						<!--这个可以对应的下面的methods中的方法-->
						<!--<td>{{sum()}}</td>-->
					</tr>
					<tr>
						<td>1</td>
						<td>平均</td>
						<!--将我们的所用的数据放到下面的computed计算属性中，用函数写下来-->
						<td>{{averge}}</td>


					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		//计算属性
		var app = new Vue({
			el: "#app",
			data: {
				core1: 25,
				core2: 35,
				core3: 45,
			},
			//computed计算属性
			computed: {//我们可以通过大量的逻辑，通过function进行封装起来，用return返回计算的值
				sum:function() {
					//通过这样可以输出数值
					return parseFloat(this.core1) + parseFloat(this.core2) + parseFloat(this.core3);
				},
				averge:function(){
					return Math.round(this.sum / 3);
				}
			},
//			methods:{
//				sum:function() {
//					return this.core1 + this.core2 + this.core3;
//				},
//			}


		})
	</script>