银川网站制作,博客网站的建设,网站设计基本结构,上海城乡建设管理局网站v-model使用1. 简单的demo2. 三种框的绑定注意它是自动帮你确认值的#xff01;#xff01;#xff01;无需关心过程#xff0c;把json数据一丢到data中#xff0c;自动选中。1. 简单的demo
实现一边在输入框输入#xff0c;一边显示输入框的内容
2. 三种框的绑定
无需关心过程把json数据一丢到data中自动选中。1. 简单的demo
实现一边在输入框输入一边显示输入框的内容
2. 三种框的绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevue 数据双向绑定/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script!-- 中文文档地址 --
/head
body!-- 数据和model的双向绑定-- 表单输入绑定https://cn.vuejs.org/v2/guide/forms.html--div idapph4msg: {{ message }}/h4input typetext v-modelmessage//div!-- 单选框 --div idapp1h4gender: {{ gender }}/h4input name gender typeradio value男 v-modelgender 男input name gender typeradio value女 v-modelgender 女/div!-- 多选框 --div idapp2h4hobby: {{ hobby }}/h4input namehobby typecheckbox value1 v-modelhobby篮球input namehobby typecheckbox value2 v-modelhobby羽毛球input namehobby typecheckbox value3 v-modelhobbypingPong球input namehobby typecheckbox value4 v-modelhobby足球/div!-- 下拉框 --div idapp3h4selected: {{ selected }}/h4select v-modelselectedoption value disabled 请选择 /optionoptionjava/optionoptionpython/optionoptiongo/option/select/divscriptlet app new Vue({el: #app,data: {message: hello, vue.js!}});new Vue({el: #app1,data: {gender: 女}});new Vue({el: #app2,/* 多个复选框请使用数组 */data: {hobby: [2, 3]}});/* 下拉框 绑定数据 */new Vue({el: #app3,data: {selected: // selected: java 会自动选中java这一项}});/script/body
/html
