监听器计算机
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="text" v-model="n1" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="text" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:null,
opt:'+'
},
methods:{
watch1(){
switch (this.opt) {
case '+':
this.result = Number(this.n1) + Number(this.n2);
break;
case '-':
this.result = Number(this.n1) - Number(this.n2);
break;
case '*':
this.result = Number(this.n1) * Number(this.n2);
break;
case '/':
this.result = Number(this.n1) / Number(this.n2);
break;
}
}
},
watch:{
n1:function(){
this.watch1()
},
n2:function(){
this.watch1()
},
opt:function(){
this.watch1()
}
},
created(){
this.watch1()
}
})
</script>
</body>
</html>
监听器：主要就是监听自身数据所发生的变化 特别注意的是监视同一个东西为多个属性数据时,把多个属性数据放到一个数组里面进行监视这样更方便
方法计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<hr><button @click="fangfa">计算</button><hr />
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
opt: '+',
result: 0
},
methods: {
fangfa() {
switch (this.opt) {
case '+':
this.result = Number(this.n1) + Number(this.n2);
break;
case '-':
this.result = Number(this.n1) - Number(this.n2);
break;
case '*':
this.result = Number(this.n1) * Number(this.n2);
break;
case '/':
this.result = Number(this.n1) / Number(this.n2);
break;
}
}
}
});
</script>
</body>
</html>
方法主要就是定义方法进行调用接收
计算属性计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="text" v-model="n1"/>
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="n2"/>
<input type="text" v-model="result"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
opt:'+'
},
computed:{
result(){
switch (this.opt) {
case '+':
return Number(this.n1) + Number(this.n2);
break;
case '-':
return Number(this.n1) - Number(this.n2);
break;
case '*':
return Number(this.n1) * Number(this.n2);
break;
case '/':
return Number(this.n1) / Number(this.n2);
break;
}
}
}
})
</script>
</body>
</html>
计算属性：主要就是计算完数据要有返回值 特别注意的是计算属性的函数方法要有返回值,直接使用双花括号接收就行
表达式计算器
<!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">
<input type="text" v-model.number="number1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<br />
<div>
<p v-if="opt=='+'">结果：{{number1+number2}}</p>
<p v-if="opt=='-'">结果：{{number1-number2}}</p>
<p v-if="opt=='*'">结果：{{number1*number2}}</p>
<p v-if="opt=='/'">结果：{{number1/number2}}</p>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*"
}
})
</script>
</html>
表达式：使用表达式用v-if进行绑定
标签：case,VUE,Number,break,写出,result,计算器,n1,n2 From： https://www.cnblogs.com/lmt6/p/17280533.html