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

最新推荐文章于 2023-08-10 16:20:37 发布

407指导员

最新推荐文章于 2023-08-10 16:20:37 发布

阅读量779

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/111457343

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

input中的值绑定

<!DOCTYPE html>
<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">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>修饰符2</title>
</head>
<body>
<div id="app">
  <!--1.lazy修饰符-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
  <!--2.number修饰符-->
  <input type="text" v-model.number="age">
  <h2>{{typeof age}}</h2>
  <!--3.trim修饰符-->
  <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>

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input中的值绑定/v-model修饰符

input中的值绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多选框</title></head><body><div id="app"> <label :for="item" v-for="item in originHobbies"> <input typ
复制链接

扫一扫