【element-ui】输入框组件el-input输入数字/输出Number类型：type=“number“、v-model.number用法

输入框组件el-input输入数字/输出Number类型

1、基础用法

• 输入：任何文本 → 输出：String类型

<el-input v-model="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 "abc"
输入 123 —— inputText输出 "123"
输入 a1b2c3 —— inputText输出 "a1b2c3"
-->

2、type="number"

• 输入：仅限数字 → 输出：String类型

<el-input type="number" v-model="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 ""
输入 123 —— inputText输出 "123"
输入 a1b2c3 —— inputText输出 "123"
-->

3、.number

• 输入：全数字 → 输出：Number类型
• 输入：其他文本 → 输出：String类型

<el-input v-model.number="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 "abc"
输入 123 —— inputText输出 123
输入 a1b2c3 —— inputText输出 "a1b2c3"
-->

4、type="number" + .number

• 输入：仅限数字 → 输出：Number类型

<el-input type="number" v-model.number="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 ""
输入 123 —— inputText输出 123
输入 a1b2c3 —— inputText输出 123
-->