vue计算属性、及其他属性--- highlight: tomorrow-night --- ```html 第一个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			1. 计算属性
			  在computed属性对象中定义计算属性的方法
			  在页面中使用{{方法名}}来显示计算的结果
		 -->
		 <div id="d1">
			 第一个数：<input type="number" v-model="one" /><br>
			 第二个数：<input type="number" v-model="two" /><br>
			 <!-- 方式1:表达式计算 -->
			 积1：{{one*two}}<br>
			 <!-- 方式2:通过调用函数 -->
			 积2：{{js()}}<input type="text" v-model="js()" /><br>
			 <!-- 方式3:通过vue实例的computed属性进行监视1.0 -->
			 积3：{{jss}}<input type="text" v-model="jss" /><br>
			 <!-- 方式4:通过vue实例的computed属性进行监视2.0 -->
			 积4：{{jsjs}}<input type="text" v-model="jsjs" /><br>
		 </div>
		<script type="application/javascript" src="../js/vue.js"></script>
		<script type="application/javascript">
			new Vue({
				el : "#d1",
				data : {
					one : 10,
					two : 5
				},
				methods: {
					js(){
						return this.one+"------"+this.two;
					}
				},
				computed : {
					jss(){
						//return关键字代表返回，实际上走的是get方法
						return this.one+"------"+this.two;
					},
					jsjs : {
						/* 如果属性值改变，会改变返回值 */
						get(){
							return this.one+"------"+this.two;
						},
						/* 如果返回值改变，会反向改变属性值 */
						/* 参数n代表最新的返回值 */
						set(n){
							var arr = n.split("------");
							this.one = arr[0];
							this.two = arr[1];
						}
					}
				}
			});
		</script>
	</body>
</html>