vue v-model表单控件绑定详解

v-model 指令在表单控件元素上创建双向数据绑定，下面一一进行示例解释。

1、v-model 双向绑定文本

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input v-model="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   message: '绑定文本'
  }
 })
</script>
</html>

输出结果：

2、v-model 双向绑定多行文本，与上面的例子相似。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <<span>Multiline message is:</span>
 <p style="white-space: pre">{{ message }}</p>
 <br>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   message: '绑定多行文本'
  }
 })
</script>
</html>

输出结果：

3、v-model 绑定复选框

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   checked: 'true'
  }
 })
</script>
</html>

输出结果：选中为true   不选中则为false

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="john" value="张麻子" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">
 <label for="mike">Mike</label>
 <br>
 <span>Checked names: {{ checkedNames }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   checkedNames: []
  }
 })
</script>
</html>

输出结果：

4、v-model 绑定单选按钮

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <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>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   picked: ''
  }
 })
</script>
</html>

输出结果：

5、v-model 绑定下拉列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: ''
  }
 })
</script>
</html>

输出结果：

多选列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected" multiple style="width: 50px">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: []
  }
 })
</script>
</html>

输出结果：

6、动态选项，用 v-for 渲染：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: 'A',
   options: [
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
   ]
  }
 })
</script>
</html>

输出结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js事件处理器与表单控件绑定详解

    事件处理主要通过v-on这个指令来执行. 事件监听及方法处理 1.简单的可以直接内嵌在页面. 2.可以通过将方法定义在methods中,然后再v-on中执行 3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件. <div id="app-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了{{counter}}&

  • vue表单绑定实现多选框和下拉列表的实例

    在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: <label>测试多选渲染:</label> <div> <template v-for="item in chks"> <input type="checkbox" name="hobby" :value="item.id" :checked="loopsss

  • 学习vue.js表单控件绑定操作

    本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->

  • Vue学习笔记之表单输入控件绑定

    表单输入绑定 基础用法 文本 <input v-model:"msg" placeholder="edit me"/> ### 多行文本 <textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea> ### 复选框 爱好 <input type=&q

  • Vue.js每天必学之表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit

  • Vue 表单控件绑定的实现示例

    本文介绍了Vue 表单控件绑定的实现示例,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text&qu

  • VUE实现表单元素双向绑定（总结）

    本文介绍了VUE实现表单元素双向绑定(总结) ,分享给大家,具体如下: checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inpu

  • vue2.0数据双向绑定与表单bootstrap+vue组件

    vue2.0数据双向绑定与表单bootstrap+vue组件

    最近一直在用vue,觉得确实是好用. 一,拿数据的双向绑定来说吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <div id="app"> {{ name }} <input typ

  • Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）

    Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

  • vue v-model表单控件绑定详解

    vue v-model表单控件绑定详解

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js&quo

  • vue指令之表单控件绑定v-model v-model与v-bind结合使用

    一.表单控件绑定v-model v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. ① 单行文本框 input[type="text"] .多行文本框 textarea: v-model值绑定到value属性: <body> <div id="app"> <input type="text" v-model=&quo

  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e

  • Vue表单控件绑定图文详解

    Vue 表单控件绑定的实现,具体可以通过以下步骤操作来实现. 1.基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. 2.Checkbox 单个勾选框,逻辑值: 3.多个勾选框,绑定到同一个数组: 4.动态选项,用 v-for 渲染: 5.值绑定 对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

  • Vue.js表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PlayAround2 Have Fun</title> <sc

随机推荐