写一个web代码,实现在el-input-number控件输入,并显示
时间: 2023-05-23 18:04:58 浏览: 191
以下是一个简单的HTML / Javascript代码示例,使用了Vue框架和Element UI库来创建一个包含el-input-number控件的Web应用,允许用户输入数字并在页面上显示:
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Display input number in Web</title>
<!-- 引入 Element UI 库的 CSS 文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-input-number v-model="inputNumber" @change="displayNumber" :min="0" :max="100"></el-input-number>
<br><br>
<span v-if="inputNumber" style="color: blue">You entered {{ inputNumber }}</span>
</div>
<!-- 引入 Vue.js 库和 Element UI 库的 Javascript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputNumber: null
},
methods: {
displayNumber: function() {
console.log("Input number changed to: " + this.inputNumber);
}
}
});
</script>
</body>
</html>
```
这个示例中创建了一个Vue实例,使用了Element UI的el-input-number组件,将其绑定到data属性中的inputNumber变量上。同时,当用户在inputNumber中输入数字时,通过@change指令触发displayNumber方法来将输入的数字在控制台进行输出。最后,通过Vue的模板语言展示输入内容。
阅读全文