<template>
<div>
<h1>数据绑定</h1>
</div>
<div>
<h2>单向数据绑定</h2>
单向数据:<input type="text" v-bind:value="name">
<h2>双向数据绑定</h2>
双向数据:<input type="text" v-model="name">
<hr/>
如下代码是错误的, 因为v-model只能应用在表单类元素(输入类元素)上<br/>
input 单选框 多选框 下拉选 多行输入 (共同的特点都有value值)
<!-- <h2 v-mondel:x="name">你好啊</h2> -->
<hr/>
Vue中有2种数据绑定的方式:<br/>
1.单向绑定(v-bind): 数据只能从data流向页面<br/>
2.双向绑定(v-mondel:value) 可以简写称为 v-mondel,因为v-model默认收集的就是value值
</div>
</template>
<script>
export default {
data() {
return {
name: 'qinling',
http: {
url: 'http://www.baidu.com',
hello:'nihao'
}
}
}
}
</script>
03数据绑定
最新推荐文章于 2024-06-28 18:39:53 发布