自己做第一个网站,关键词搜索量怎么查,谷歌网站流量分析,为什么企业需要建设网站?单向数据绑定#xff1a;当数据发生改变时#xff0c;视图会自动更新#xff0c;但当用户手动更改input的值#xff0c;数据不会自动更新#xff1b;
双向数据绑定#xff1a;当数据发生改变时#xff0c;视图会自动更新#xff0c;但当用户手动更改input的值#xf…单向数据绑定当数据发生改变时视图会自动更新但当用户手动更改input的值数据不会自动更新
双向数据绑定当数据发生改变时视图会自动更新但当用户手动更改input的值数据也会自动更新。
一、v-model
1、双向数据绑定
双向数据绑定input typetext v-modelweb.text
2、单选框
input typeradio v-modelweb.radio value星期一星期一
input typeradio v-modelweb.radio value星期二星期二
3、复选框
input typecheckbox v-modelweb.checkbox value星期一星期一
input typecheckbox v-modelweb.checkbox value星期二星期二
input typecheckbox v-modelweb.checkbox value星期三星期三
4、记住密码
input typecheckbox v-modelweb.remember记住密码
5、下拉框
对于selectv-model绑定的是select元素中选中的项。
select v-modelweb.selectoption value请选择/optionoption value星期一星期一/optionoption value星期二星期二/optionoption value星期三星期三/option
/select
完整示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srcvue.global.js/script --/head
bodydiv idapph3文本框{{web.text}}/h3h3单选框{{web.radio}}/h3h3复选框{{web.checkbox}}/h3h3记住密码{{web.remember}}/h3h3下拉框{{web.select}}/h3hr单向数据绑定input typetext :valueweb.textbr双向数据绑定input typetext v-modelweb.texthr!-- 单选框 --input typeradio v-modelweb.radio value星期一星期一input typeradio v-modelweb.radio value星期二星期二hr!-- 复选框 --input typecheckbox v-modelweb.checkbox value星期一星期一input typecheckbox v-modelweb.checkbox value星期二星期二input typecheckbox v-modelweb.checkbox value星期三星期三hr!-- 记住密码 --input typecheckbox v-modelweb.remember记住密码hr!-- 下拉框 --select v-modelweb.selectoption value请选择/optionoption value星期一星期一/optionoption value星期二星期二/optionoption value星期三星期三/option/select/divscript typemoduleimport {createApp, reactive} from ./vue.esm-browser.js// const {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){ const web reactive({text:denglu.com,radio:,checkbox:[],remember:false,select:})return{web }}}).mount(#app)// mount为挂载/script
/body
/html 二、v-model修饰符
实现功能在失去焦点或按下回车键之后再渲染。
input typetext v-model.lazyweb.url
实现功能输入框的值转换为数字类型
input typetext v-model.numberweb.user
实现功能去除收尾空格
input typetext v-model.trimweb.url
