表单与v-model
Posted hongpeng0209
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单与v-model相关的知识,希望对你有一定的参考价值。
基本用法
vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用,输入的内容会实时映射到绑定的数据上
example1:修改input框内容,message会实时渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>exmaple</title> <link rel="stylesheet" href="main.css"/> </head> <div id="app"> <input type="text" v-model="message"> <p>输入的内容是{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
js
var app = new Vue({ el: "#app", data : { message: ‘‘ } });
example2:单选按钮
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example2</title> <link rel="stylesheet" href="main.css"/> </head> <div id="app"> <input type="radio" v-model="picked" value="HTML" id="html"> <label for="html">HTML</label> <br> <input type="radio" v-model="picked" value="JS" id="js"> <label for="js">JS</label> <br> <input type="radio" v-model="picked" value="CSS" id="css"> <label for="css">CSS</label> <br> <p>选择的项是{{ picked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
js
var app = new Vue({ el: "#app", data : { picked:‘js‘ } });
example3:多选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example2</title> <link rel="stylesheet" href="main.css"/> </head> <div id="app"> <input type="checkbox" v-model="checked" value="HTML" id="html"> <label for="html">HTML</label> <br> <input type="checkbox" v-model="checked" value="JS" id="js"> <label for="js">JS</label> <br> <input type="checkbox" v-model="checked" value="CSS" id="css"> <label for="css">CSS</label> <br> <p>选择的项是{{ checked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
js
var app = new Vue({ el: "#app", data : { checked:[‘JS‘,‘HTML‘] } });
example4:选择框
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example2</title> <link rel="stylesheet" href="main.css"/> </head> <div id="app"> <select v-model="selected" multiple> <option>html</option> <option>js</option> <option>css</option> </select> <p>选择的项是{{ selected }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
js
var app = new Vue({ el: "#app", data : { selected: [‘html‘,‘css‘] } });
此时v-model绑定的是一个数组
实际业务中,option通过v-for动态生成,value和text通过v-bind动态生成
example4可以修改一下
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example2</title> <link rel="stylesheet" href="main.css"/> </head> <div id="app"> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{ option.text }}</option> </select> <p>选择的项是{{ selected }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
js
var app = new Vue({ el: "#app", data : { selected: ‘html‘, options:[ { text:‘html‘, value:‘html‘, }, { text:‘js‘, value:‘js‘, }, { text:‘css‘, value:‘css‘ } ] } });
以上是关于表单与v-model的主要内容,如果未能解决你的问题,请参考以下文章