效果展示:
使用工具:HBuilder
插件:Vue.js
1.data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></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" />
<button>=</button><br />
<p v-if="opt=='+'">{{number1}}{{opt}}{{number2}}</p>
<p v-if="opt=='-'">{{number1}}{{opt}}{{number2}}</p>
<p v-if="opt=='*'">{{number1}}{{opt}}{{number2}}</p>
<p v-if="opt=='/'">{{number1}}{{opt}}{{number2}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:""
}
})
</script>
</html>
2.methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" @click="calc">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model.number="number2" />
<button >=</button><br />
结果:{{result}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
result:""
},
methods:{
calc(){
if(this.opt=="+"){
this.result = this.number1+this.number2}
else if(this.opt=="-"){
this.result = this.number1-this.number2
}else if(this.opt=="*"){
this.result = this.number1*this.number2
}else if(this.opt=="/"){
this.result = this.number1/this.number2
}
}
}
})
</script>
</html>
3.computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input id="input" type="number" v-model="num1" />
<select v-model="selected">
<option value ="">请选择</option>
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="number" v-model="num2" />
<button>=</button>
<input type="text" v-model="result" onfocus="this.blur()"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
selected:'+'
},
computed:{
result:function(){
if(this.selected === '' || this.num1=='' || this.num2 =='')
return null
return eval(`${this.num1}${this.selected}(${this.num2})`)
}
}
})
</script>
</body>
</html>
4.watch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model.number="number2" />
<button>=</button><br />
结果:{{jisuan}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
jisuan:""
},
watch:{
number1:function(val){
if(this.opt=='+'){
this.jisuan=val+this.number2;
}else if (this.opt=='-') {
this.jisuan=val-this.number2;
}else if (this.opt=='*') {
this.jisuan=val*this.number2;
}else if (this.opt=='/') {
this.jisuan=val/this.number2;
};
number2:function(val){
if(this.opt=='+'){
this.jisuan=this.number1+val;
}else if(this.opt=='-'){
this.jisuan=this.number1-val;
}else if(this.opt=='*'){
this.jisuan=this.number1*val;
}else if(this.opt=='/'){
this.jisuan=this.number1/val;
}
},
}
})
</script>
</html>