龙空技术网

Vue表单 关于(.number .trim)小技巧

北漂佳佳的生活 180

前言:

如今朋友们对“vuenumber转字符串”大致比较关注,兄弟们都需要剖析一些“vuenumber转字符串”的相关内容。那么小编也在网上收集了一些关于“vuenumber转字符串””的相关内容,希望各位老铁们能喜欢,看官们快快来了解一下吧!

<div id="app">

<label for="username">昵称:</label>

<input type="text" id="username" v-model.trim="username">

<br>

<label for="age">年龄:</label>

<input type="number" id="age" v-model.number="age">

<br>

<label for="checkbox">单身:</label>

<input type="checkbox" id="checkbox" v-model="checked">

<label for="checkbox">{{checked}}</label>

<br>

<label>喜欢:</label>

<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">

<label for="runoob">Runoob</label>

<input type="checkbox" id="google" value="Google" v-model="checkedNames">

<label for="google">Google</label>

<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">

<label for="taobao">taobao</label>

<br>

<br>

<input type="submit" v-on:click="submit"/>

<br/>

<br/>

<span>昵称: {{username}}</span>

<br>

<span>年龄: {{age}}</span>

<br>

<span>单身: {{checked}}</span>

<br>

<span>喜欢: {{checkedNames}}</span>

</div>

以上是html代码

以下是js代码

<script>

var vm=new Vue({

el:"#app",

data:{

username:"aaa",

age:"15",

checked:false,

checkedNames:[]

},

methods:{

submit:function(){

var info=new Object();

info.username=this.username;

info.age=this.age;

info.checked=this.checked;

info.checkedNames=this.checkedNames;

}

}

})

//vue外部获取内部值

console.log(vm.username);

console.log(vm.checkedNames);

//.number 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值

//.trim 如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入

</script>

标签: #vuenumber转字符串