标签：vue nbsp meta this关键字 eth 交互 dev normal char
这次利用闲余时间了解使用了v-model组件，v-model是一个双向绑定的组件，所谓双向绑定就是交互双方都可绑定。v-bind属性绑定是单向绑定
废话少说，上代码。以下实例主要是做了一个简易计算器。主要用意在于体验一下v-model双向绑定，其他的不重要。
要是小白拿来调试，其中有几个注意的点：
@1 建议使用VScode
@2 将vue.js引用文件的路径换为自己的，就是以下的路径，该路径为相对路径。
script src="vue.js">script>
@3 其中有一些逻辑语句，如果不理解，建议学一下原生js。很容易理解 vue中调用通过this关键字，parseInt是将获取双向绑定的值转换为Int类型
methods:{
calc(){//计算器操作
switch (this.opt) {
case ‘+‘:
this.result=parseInt(this.n1)+parseInt(this.n2);
break;
case ‘-‘:
this.result=parseInt(this.n1)-parseInt(this.n2);
break;
case ‘*‘:
this.result=parseInt(this.n1)*parseInt(this.n2);
break;
case ‘/‘:
this.result=parseInt(this.n1)/parseInt(this.n2);
break;
}
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
script src="vue.js">script>
title>Documenttitle>
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">
input type="button" value="=" @click="calc">
input type="text" v-model="result">
div>
script>
var vm = new Vue({
el:‘#app‘,
data:{
n1:0,
n2:0,
result:0,
opt:‘+‘
},
methods:{
calc(){//计算器操作
switch (this.opt) {
case ‘+‘:
this.result=parseInt(this.n1)+parseInt(this.n2);
break;
case ‘-‘:
this.result=parseInt(this.n1)-parseInt(this.n2);
break;
case ‘*‘:
this.result=parseInt(this.n1)*parseInt(this.n2);
break;
case ‘/‘:
this.result=parseInt(this.n1)/parseInt(this.n2);
break;
}
}
}
});
script>
body>
html>
vue.js菜鸟学习之（二）
标签：vue nbsp meta this关键字 eth 交互 dev normal char
原文地址：https://www.cnblogs.com/zjj123456/p/12623873.html