松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › v-model的使用

v-model的使用

迦娜王
2年前Vue2.x从零开始
572 0 0

v-model的使用

你可以用v-model指令在表单<input> 、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

代码:

<template>
  <div>
    <p>=====普通输入框=====</p>
    <input v-model="message1" placeholder="edit me">
    <p>Message is: {{ message1 }}</p>

    <p>=====多行输入框=====</p>
    <textarea v-model="message2" placeholder="add multiple lines"></textarea>
    <p>Message is:</p>
    <p style="white-space: pre-line;">{{ message2 }}</p>

    <p>=====复选框=====</p>
    <input type="checkbox" v-model="checked" >
    <p>checkbox is:{{checked}}</p>
    <p>=====多个复选框=====</p>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    <p>=====单选按钮=====</p>
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>

    <p>=====选择框=====</p>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>

    <p>=====选择框(多选时)=====</p>
    <select v-model="multipleSelected" multiple style="width: 50px;">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <br>
    <span>Selected: {{ multipleSelected }}</span>
  </div>
</template>

<script>

export default {
    data(){
        return {
            message1:'',
            message2:'',
            checked:false,
            checkedNames:[],
            picked:'',
            selected:'',
            multipleSelected:[]
        }
    }
}
</script>

<style>
</style>

这部分代码整理自官网手册。

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
v-show的使用
上一篇
v-bind的使用
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • v-model的使用
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
233 喜欢
  • 0
  • 0
  • Top