Vue笔记:v-model的使用

一,v-model的基本使用

在了解v-model之前,我们务必要明白v-model本质上是一种语法糖,它其实是由动态属性绑定和input事件绑定而形成的双向数据绑定。

(1)v-model的基本使用

html 复制代码
<template>
  <h2>{{ message }}</h2>
  <input type="text" v-model="message">
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  }
}
</script>

<style scoped>

</style>

当表单使用v-model时,v-model会绑定一个变量,这个变量与表单的value是互相影响的,如果我们改变message时,表单的内容(即value)会发生相应的变化。同样地,如果我们手动修改表单的内容,这种影响也会反映到message上,结果就是h2的内容发生变化。

(2)v-model的绑定原理

在看完上方的v-model的使用方式后,如果理解的没问题的话,目前其实是可以跳过这一段的,但是在后面组件v-model得学习原理才能够明白,所以还是推荐这里看一下原理,方便以后理解。

html 复制代码
<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="getValue"> 
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  methods:{
    getValue(e){
      this.message = e.target.value
    }
  }
}
</script>

<style scoped>

</style>

或者简化来写:

html 复制代码
<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  
}
</script>

<style scoped>

</style>

以上就是v-model的原理,虽然v-model是vue的指令,但尽量还是不要以指令来看待它,只要记住它由两部分组成:动态属性绑定和事件绑定。这样即使后面组件v-model监听事件也不会迷惑。

二, v-model的绑定

接下来的内容比较简单,就是一些元素使用v-model的方法。在前文中我已经使用过text类型的表单类型,剩下的分别为:radio,checkbox,select。

(1)v-model绑定textarea(额外的)

html 复制代码
<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  
}
</script>

<style scoped>

</style>

textarea与text表单使用方法一样。

(2)v-model绑定radio

html 复制代码
<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
 <label for="football">
  <input type="checkbox" id="football" value="football" v-model="hobbies">足球
 </label>
 <label for="basketball">
  <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">篮球
 </label>
 <label for="tennis">
  <input type="checkbox" id="tennis" value="tennis" v-model="hobbies">网球
 </label>
 <label for="female">
  <input type="radio" id="female" value="female" v-model="gender">男
 </label>
 <label for="male">
  <input type="radio" id="male" value="male" v-model="gender">女
 </label>
 <h2>{{ hobbies }}</h2>
 <h2>{{ gender }}</h2>
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue",
      hobbies:[],
      gender:""
    }
  },
  
}
</script>

<style scoped>

</style>

(3)v-model绑定checkbox

html 复制代码
<template>
  <h2>{{ message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="message = $event.target.value"> 
  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
 <label for="football">
  <input type="checkbox" id="football" value="football" v-model="hobbies">足球
 </label>
 <label for="basketball">
  <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">篮球
 </label>
 <label for="tennis">
  <input type="checkbox" id="tennis" value="tennis" v-model="hobbies">网球
 </label>
 <h2>{{ hobbies }}</h2>
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue",
      hobbies:[]
    }
  },
  
}
</script>

<style scoped>

</style>

使用方法和前面差不多。

(4)v-model绑定select

html 复制代码
<template>
 <select name="" id="" multiple size="3" v-model="fruits">
  <option value="apple">苹果</option>
  <option value="orange">橘子</option>
  <option value="banana">香蕉</option>
 </select>
 <h2>{{ fruits }}</h2>
</template>

<script>
export default {
  data(){
    return {
      fruits:[]
    }
  },
  
}
</script>

<style scoped>

</style>

三,v-model的修饰符

对于修饰符,这个用得不是很多。

.lazy:使得只有表单提交或者失去焦点时才会刷新一次值。

.number 使得能被转化为Number类型的变量设置为Number,要不然默认String

.trim:去除掉空格

相关推荐
程序员_三木1 分钟前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
LuH11242 分钟前
【论文阅读笔记】Learning to sample
论文阅读·笔记·图形渲染·点云
顾平安1 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网1 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工1 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
沈剑心1 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器
m0_748237051 小时前
Chrome 关闭自动添加https
前端·chrome
prall1 小时前
实战小技巧:下划线转驼峰篇
前端·typescript
开心工作室_kaic2 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js