输入数字，点击计算可以实现两个数相加，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model用于input标签，用于实现联动-->
<!-- .number限制符能把用户的输入当作数字处理-->
<input type="text" v-model.number="num1">
<span>+</span>
<input type="text" v-model.number="num2">
<span>=</span>
<input id="result" readonly v-model.number="result">
<!-- @click是v-on:click的简写,用于给元素添加点击事件-->
<button @click="calc">计算</button>
</div>
<script>
let vm = new Vue({
// 指定边界
el:'#app',
data: {
num1: 0,
num2: 0,
result: 0
},
methods:{
calc:function () {
this.result = this.num1+this.num2
}
}
})
</script>
</body>
</html>
涉及到一些前端的东西，这段代码是在pycharm里编写的。
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
已为社区贡献1条内容
