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:去除掉空格

相关推荐
叹一曲当时只道是寻常几秒前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生15 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮21 分钟前
webpack基础
前端·webpack
YongGit40 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript