文章目录
- 一、代码
- 二、展示
一、代码
vue2类型写法
代码语言：javascript复制<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类型写法
代码语言：javascript复制<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>二、展示
