input中的值绑定/v-model修饰符

input中的值绑定


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多选框title>
head>
<body>
<div id="app">
  <label :for="item" v-for="item in originHobbies">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{
    {item}}
  label>
  <h2>您的爱好是:{
    {hobbies}}h2>
div>
<script src="../js/vue.js">script>
<script>
  const app = new Vue({
      
    el: '#app',
    data: {
      
      message: '你好啊',
      hobbies: ['篮球'],
      originHobbies:['篮球','足球','乒乓球','排球','橄榄球'],
    }
  });
script>
body>
html>

之前我们的input里的value值都是写死的,但是实际情况我们得到的多选框内容可能是一个数组,内容很多,一个个写很麻烦,我们之前学了动态绑定和v-for遍历,在这里也可以用上。

v-for写在label上,这样每个选项都可以点击文字信息选中。然后动态获取选项数组中的每一个元素,将其动态绑定给value值,同时动态绑定每个多选框的id,和label的for属性,这样可以一一对应。最后双向绑定我们的选项数组。

记住绑定数据时要用:来动态绑定,这样才能把引号内的当成变量,否则当成普通的字符串。

v-model修饰符

lazy修饰符

默认情况下,v-model默认是在input事件中同步输入框的数据的。

也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新:

<input type="text" v-model.lazy="message">
number修饰符

默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。

但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入的内容自动转成数字类型:

<input type="text" v-model.number="age">
trim修饰符

如果输入的内容首尾有很多空格,通常我们希望将其去除

trim修饰符可以过滤内容左右两边的空格

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

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>修饰符2title>
head>
<body>
<div id="app">
  
  <input type="text" v-model.lazy="message">
  <h2>{
    {message}}h2>
  
  <input type="text" v-model.number="age">
  <h2>{
    {typeof age}}h2>
  
  <input type="text" v-model.trim="name">
  <h2>{
    {name}}h2>
div>
<script src="../js/vue.js">script>
<script>
  const app = new Vue({
      
    el: '#app',
    data: {
      
      message: '你好啊',
      age: 0,
      name:''
    }
  });
script>
body>
html>

你可能感兴趣的:(vue,vue)