v-model使用

最新推荐文章于 2023-05-09 19:13:07 发布

soputasmile11

最新推荐文章于 2023-05-09 19:13:07 发布

阅读量222

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014473112/article/details/120959099

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、使用原理

v-model其实只是一个语法糖，它可以通过两个指令实现，一个是v-bind（语法糖冒号）和v-on(语法糖@)实现（以下示例我们有两种方式让input的值和message绑定，一个是直接在html中指定message=$event.target.value，也可以在methods中设置—这些是js的基础）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">

  <!--<input :value="message" @input="message = $event.target.value"/>{{message}}-->
  <input :value="message" @input="bindVal"/>{{message}}
  <textarea v-model="message"></textarea>
</div>
<script>
  // v-model其实只是一个语法糖，它可以通过两个指令实现，一个是v-bind（语法糖冒号）和v-on(语法糖@)实现，这里我们有两种方式让input的
  //值和message绑定，一个是直接在html中指定message=$event.target.value，也可以在methods中设置
  const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      methods: {
        bindVal () {
          this.message = event.target.value
        }
      }
    })

</script>

</body>
</html>

2、v-model和不同表单元素结合使用

参考官网文档

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <!--结合radio使用，v-model绑定的value默认是input中的value,一定要指定value-->
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <!-- 结合checkbox：单选框使用，v-model绑定的是布尔值-->
  <label for="singleBox">
  <input type="checkbox" id="singleBox" value='singleBoxVal'v-model="singleBoxModel">
  </label>
  <!-- 结合checkbox：复选框使用 v-model绑定value,对应的变量名要定义成数组-->
  <label for="checkbox">checkbox</label>
  <input type="checkbox" id="checkbox2" value='checkbox2'v-model="checkeNames">
  <label for="checkbox2">checkbox2</label>
  <input type="checkbox" id="jack" value="Jack" v-model="checkeNames">
  <label for="jack">Jack</label>
  <!--结合select单选使用 ，注意v-model放在select节点上面-->
  <select v-model="fruit">
    <option disabled value="">请选择</option>
    <option  value="香蕉">香蕉</option>
    <option  value="苹果">苹果</option>
    <option  value="梨">梨</option>
    <option  value="榴莲">榴莲</option>
  </select>
  <!--结合select多选使用，和单选相差不大，需要注意的就是v-model变量要是数组 -->
  <select v-model="fruits" multiple>
    <option disabled value="">请选择</option>
    <option  value="香蕉">香蕉</option>
    <option  value="苹果">苹果</option>
    <option  value="梨">梨</option>
    <option  value="榴莲">榴莲</option>
  </select>
  <!-- v-for遍历select:需要注意的是option中的value，因为是动态绑定的，所以要用冒号-->
  <select v-model="forFruit">
    <option v-for="item in fruitHome" :value="item.key">{{item.name}}</option>
  </select>

  <h2>{{sex}}</h2>
  <h2>{{singleBoxModel}}</h2>
  <h2>{{checkeNames}}</h2>
  <h2>{{fruit}}</h2>
  <h2>{{forFruit}}</h2>
</div>
<script>
  const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        singleBoxModel:false,
        sex: '',
        checkeNames: [],
        fruit: '梨',
        fruits: [],
        fruitHome: [
          {key: 'banana', name:'香蕉'},
          {key: 'apple', name:'苹果'},
          {key: 'pear', name:'梨'},
          {key: 'durian', name:'榴莲'}
        ],
        forFruit: 'banana'
      }
    })

</script>

</body>
</html>

3、v-model修饰符

参考官网文档
主要有.trim .lazy .number修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <input v-model.lazy="message"/>
  <input type="text" v-model.number="age"/>
  <input type="text" v-model.trim="trimMsg"/>
  <div>{{message}}</div>
  <div>{{age}}</div>
  <div>{{trimMsg}}</div>
</div>
<script>
  const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        trimMsg:'',
        age:12
      }
    })

</script>

</body>
</html>

soputasmile11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="../js/vue.js"></script><div id="app"> <!--<input :value="message
复制链接

扫一扫