vue例子3

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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

　　加上

?

1

reactive