12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <template>
- <h2>reactive的使用</h2>
- <h3>名字: {{user.name }}</h3>
- <h3>年龄:{{ user.age }}</h3>
- <h3>朋友: {{ user.firend }}</h3>
- <h3>性别: {{ user.sex }}</h3>
- <hr>
- <button @click="update">更新数据</button>
- </template>
- <script lang="ts">
- import { defineComponent,reactive } from 'vue'
- export default defineComponent({
-
-
-
- setup () {
-
-
- const obj = ({
- name: '小明',
- age: 20,
- firend: {
- name: '小红',
- age: 18,
- cars: [1,2,3]
- }
- })
-
-
- const user = reactive<any>(obj)
-
- console.log(user)
- const update= ()=>{
-
-
- user.name = '小兰'
- user.age += 2
- user.firend.name += '+++'
-
-
- user.sex = '男'
-
-
- user.firend.cars[1] = 'bmw'
-
- user.firend.cars[3] = ''
- }
- return {
-
- user,
- update
- }
- }
- })
- </script>
- <style scoped>
- </style>
|