vue3使用ts和使用js

1、使用ts

<template>
	<div style="display: flex;margin: 20px;">
		<div style="width: 20%;border: 1px solid rgb(221 221 221);height: 80vh;">1</div>
		<div style="width: 60%;display: flex;justify-content: center;" @click="dadeclick">
			<div style="border: 1px solid rgb(221 221 221);height: 80vh;width: 400px;">
				333
			</div>
		</div>
		<div style="width: 20%;border: 1px solid rgb(221 221 221);height: 80vh;">
			3
			<input v-model="list.id" />
			{{list.id}}
			<input v-model="list.dade" />
			{{list.dade}}
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	let list = ref(
		{	
			id:"",
			dade:""
		}
	)
	
	function dadeclick(){
		list.value.id = 'wwww'
		list.value.dade = "555"
		console.log(list)
	}
	
</script>

<style>
</style>

2、使用js

<template>
	<div style="display: flex;margin: 20px;">
		<div style="width: 20%;border: 1px solid rgb(221 221 221);height: 80vh;">1</div>
		<div style="width: 60%;display: flex;justify-content: center;" @click="dadeclick">
			<div style="border: 1px solid rgb(221 221 221);height: 80vh;width: 400px;">
				333777
			</div>
		</div>
		<div style="width: 20%;border: 1px solid rgb(221 221 221);height: 80vh;">
			3
			<input v-model="list.id" />
			{{list.id}}
			<input v-model="list.dade" />
			{{list.dade}}
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	let list = ref(
		{	
			id:"",
			dade:""
		}
	)
	function dadeclick(){
		list.value.id = 888
		console.log(list)
	}
	
</script>

<style>
</style>