【愚公系列】2021年12月 VUE3-数据绑定v-model
【摘要】 一、代码<template> <!-- 数据绑定 --> {{msg}}----{{arr}}----{{age}}----{{users}} <br/> <!-- 双向数据绑定 --> <input type="text" v-model="name"> <br/> <select v-mo...
一、代码
vue2类型写法
<template>
<!-- 数据绑定 -->
{{msg}}----{{arr}}----{{age}}----{{users}}
<br/>
<!-- 双向数据绑定 -->
<input type="text" v-model="name">
<br/>
<select v-model="tag">
<option value="01">01</option>
<option value="02">02</option>
</select>
<br/>
<input type="checkbox" value="01" v-model="test">
<input type="checkbox" value="02" v-model="test">
<br/>
{{name}}----{{tag}}----{{test}}
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
msg: 'Hello World',
arr: [1, 2, 3],
age: 21,
users: {
id: 12,
name: '秋香'
},
name: '我是vue3',
test: '',
tag: '01'
}
}
}
</script>
vue3写法
<template>
<!-- 数据绑定 -->
{{msg}}----{{arr}}----{{age}}----{{users}}
<br/>
<!-- 双向数据绑定 -->
<input type="text" v-model="name">
<br/>
<select v-model="tag">
<option value="01">01</option>
<option value="02">02</option>
</select>
<br/>
<input type="checkbox" value="01" v-model="test">
<input type="checkbox" value="02" v-model="test">
<br/>
{{name}}----{{tag}}----{{test}}
</template>
<script>
import {
reactive,
toRefs,
} from "vue";
export default {
setup() {
const data = reactive({
msg: 'Hello World',
arr: [1, 2, 3],
age: 21,
users: {
id: 12,
name: '秋香'
},
name: '我是vue3',
test: '',
tag: '01'
});
return {...toRefs(data)};
},
};
</script>
二、展示
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）