【愚公系列】2021年12月 VUE3-数据绑定v-model

<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>

<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>