首页 > 其他分享 >ref和reactive

ref和reactive

时间:2024-05-20 15:57:22浏览次数:20  
标签:function car price reactive ref brand

 

所花时间(包括上课):  1  h左右
代码量(行):   200    左右
搏客量(篇): 1
了解到的知识点:  ref和reactive
备注(其他):  

ref和reactive

  • reactive在修改响应式对象的时候,要用Object.assign(car,{brand: 'xiaomi' , price : 20})
  • 需要一个基本类型的响应式数据,必须使用ref
  • 需要响应式对象,且层级不深,ref,reactive都可以
  • 需要一个响应式对象,层级较深,推荐用reactive
<template>
    <div class="person">
        <h2>{{ car.brand }}车的价格是:{{ car.price }}万元</h2>
        <button @click="changeBrand">修改车的品牌</button>
        <button @click="changePrice">修改车的价格</button>
        <button @click="changeCar">修改车</button>
    </div>
</template>

<script lang="ts" name="Person" setup>
import { ref, reactive } from 'vue'
let car = reactive({ brand: '奔驰', price: 100 })


function changeBrand(){
    car.brand = '宝马'
}

function changePrice(){
    car.price += 10
}

function changeCar(){
    //car = {brand: '小米', price: 20}
    Object.assign(car,{brand: '小米', price: 20})
}


</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>

标签:function,car,price,reactive,ref,brand
From: https://www.cnblogs.com/muzhaodi/p/18202148

相关文章

  • Reflective Journal III
    ......
  • Reflective Journal ⅲ
    BeforeIdidthisdigitalstory,IwatchedtheSnowWhiteandtheSevenDwarfsmovieagainanditwasreallyinterestingandworthtowatch.Intheprocessofwatching,Itookclipsofsomerepresentativephotosasthematerialofmyvideo.ThenIstarted......
  • reflective journel
    WhenIconfectedmydigitalstory,Idivideditintofourpartsinitially.Firstofall,Ineedtochoseastorywhichhascharmingplotsandprofoundmeaningunderit’ssurface,vividcharacter,etc.sodouble-mindedwereIbecausetherewereabundantst......
  • Reflective Journal III
    (1)Theprocessofmakingadigitalstory:WhenIknewthehomeworkIrememberedtraditionalshortnovelsuchas聊斋.ThecadaverizationappealedtomyinterestandIdecidedtoadaptthisnovel.Aloughthisstoryisappealing,thiskindofChinesetraditional......
  • Reflective journal about digital story
    Process:IfirstchosethestoryIpreferred,andafterfindingthestorytext,Ideliberatedrepeatedly,puttingmyselfintotheprotagonist.Imaginingwhattheprotagonistthoughtof,didandsaid,Igotthefirst-personpointofviewtext.ThenIbegan......
  • Reflective Journal III
    Theprocessofmakingadigitalstory:First,Ichooseamoviethatimpressedmemostasaobjectivetorewrite.Then,writethescript.Iobservetheperspectiveinthismovieandrewriteitfromathird-personperspective.Afterthat,Iwatchthisfilm......
  • Reflective Journal on Digital Story
    Makingadigitalstoryinvolvedseveralsteps.Istartedbybrainstormingideasandthemes.Then,Icreatedastoryboard,andfindsomeaudioclips.Afterthat,Iusedvideoeditingsoftwaretopieceeverythingtogether.Finally,Ireviewedandrefinedth......
  • Reflective Journal III
    (1)Aboutmyprocessofmakingdigitalstories:First,IchooseagoodstorythatIamfamiliarwithanddoareview.Second,begintoconceivethestoryoutline,determinethenarrativeperspectivetenseandotherbasicelements.Then,writedowntheidea......
  • Reflective Journal III
    (1)First,itisnecessarytorewritethestoryanddosomeadditionalchangetomakethestorysmooth.Next,Ineedtofindtherelevantvideoorsomepicturesandthebackgroundmusic.What'smore,It'salsoaveryvitalanddemandingmissiontofam......
  • Reflective Journal III
    1)theprocessofmakingadigitalstoryFirst,IchoosethestorywhichI’mfamiliarwith,includingDisneyFairyTales,someAesop'sFablesstoriesandotherstories.Second,IsearchontheinternetafterI’vechosenthestoryandseetheoriginalEng......