vue例子3

<template>
<div class="mylist">
<h1>一辆{{ car.brand }}，价值{{ car.price }}</h1>
<button @click="changeprice">修改价格</button>
</div>
</template>

<script lang="ts" setup name='mylinst234'>
import {reactive} from "vue";
//数据
let car={brand:'奔驰',price:'30'}
//方法
function changeprice(){
   car.price += 10
   console.log(car.price)
}
</script>

<style scoped>
/* .mylist{
   width: 600px;
   height: 300px;
   color: #fff;
   font-size: 12px;
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  background-color: #409EFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
} */
</style>

　　

<template>
<div class="mylist">
<h1>一辆{{ car.brand }}，价值{{ car.price }}</h1>
<button @click="changeprice">修改价格</button>
</div>
</template>

<script lang="ts" setup name='mylinst234'>
import {reactive} from "vue";
//数据
let car=reactive({brand:'奔驰',price:'30'})
//方法
function changeprice(){
   car.price += 10
   // console.log(car.price)
}
</script>

<style scoped>
/* .mylist{
   width: 600px;
   height: 300px;
   color: #fff;
   font-size: 12px;
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  background-color: #409EFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
} */
</style>

　　加上

reactive