3.数据绑定-阿里云开发者社区

3.数据绑定

2023-05-07 82

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue数据绑定

1.单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页

示例：

<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><!-- 普通写法 -->        单向数据绑定：<inputtype="text"v-bind:value="name"><br/></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({
el:'#root',
data:{
name:'xgc'            }
        })
</script></html>

演示：

我们通过修改输入框数据观察date数据是否改变。

没有改变。

但是反向，可以通过修改data中的数据，引起页面的变化。

2.双向数据绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向

示例：

<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><!-- 普通写法 -->            单向数据绑定：<inputtype="text"v-bind:value="name"><br/>            双向数据绑定：<inputtype="text"v-model:value="name"><br/></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({
el:'#root',
data:{
name:'xgc'            }
        })
</script></html>

演示：

我们通过修改双向输入框数据观察date数据是否改变。

data中的数据发生改变了。

同时我们单向的数据也发生改变了，是因为我们通过双向绑定引起了data中的变化，从而引起了单向数据绑定的变化。

同样我们修改data的值，都会发生改变。

3.总结

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- Vue中有2种数据绑定的方式：1.单向绑定(v-bind)：数据只能从data流向页面。2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：1.双向绑定一般都应用在表单类元素上（如：input、select等）2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。--><!-- 准备好一个容器--><divid="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>双向数据绑定：<input type="text" v-model:value="name"><br/> --><!-- 简写 -->            单向数据绑定：<inputtype="text":value="name"><br/>            双向数据绑定：<inputtype="text"v-model="name"><br/><!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({
el:'#root',
data:{
name:'xgc'            }
        })
</script></html>

文章标签：

JavaScript

3.数据绑定

1.单向数据绑定

2.双向数据绑定

3.总结

热门文章

最新文章

相关电子书