做网站怎么更新静态页,学计算机的出路,友情手机站,沈阳网站制作企业Vue中有2种数据绑定的方式#xff1a;
1.单向绑定(v-bind)#xff1a;
数据只能从data流向页面。
2.双向绑定(v-model)#xff1a;
数据不仅能从data流向页面#xff0c;还可以从页面流向data。 备注#xff1a; 1.双向绑定一般都应用在表单类元素上#xff08;如
1.单向绑定(v-bind)
数据只能从data流向页面。
2.双向绑定(v-model)
数据不仅能从data流向页面还可以从页面流向data。 备注 1.双向绑定一般都应用在表单类元素上如input、select等 2.v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title数据绑定/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- Vue中有2种数据绑定的方式1.单向绑定(v-bind)数据只能从data流向页面。2.双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。备注1.双向绑定一般都应用在表单类元素上如input、select等2.v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。--!-- 准备好一个容器--div idroot!-- 普通写法 --!-- 单向数据绑定input typetext v-bind:valuenamebr/双向数据绑定input typetext v-model:valuenamebr/ --!-- 简写 --单向数据绑定input typetext :valuenamebr/双向数据绑定input typetext v-modelnamebr/!-- 如下代码是错误的因为v-model只能应用在表单类元素输入类元素上 --!-- h2 v-model:xname你好啊/h2 --/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:123}})/script
/html
