![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/05\/20250523014902-682fd40ec4015.png\")
<\/p>\n\u5728\u7ec4\u5408\u5f0f API \u4e2d，\u63a8\u8350\u4f7f\u7528\u00a0ref()\u00a0\u51fd\u6570\u6765\u58f0\u660e\u54cd\u5e94\u5f0f\u72b6\u6001，ref()\u00a0\u63a5\u6536\u53c2\u6570，\u5e76\u5c06\u5176\u5305\u88f9\u5728\u4e00\u4e2a\u5e26\u6709\u00a0.value\u00a0\u5c5e\u6027\u7684 ref \u5bf9\u8c61\u4e2d\u8fd4\u56de<\/p>\n
\u793a\u4f8b\u4ee3\u7801：<\/p>\n
<template>
\n<view>{{ num1 }}<\/view>
\n<view>{{ num2 }}<\/view>
\n<view>{{ str }}<\/view>
\n<view>{{ arr[2] }}<\/view>
\n<view>{{obj.name}}<\/view>
\n<\/template><\/p>\n
<script setup>
\nimport {ref} from "vue"
\nlet num1 = 6
\nlet num2 = ref(10)
\n\/\/\u4f7f\u7528\u5b9a\u65f6\u5668\u6539\u53d8num2\u7684\u503c
\n\/\/ setInterval(()=>{
\n\/\/ num2.value++;
\n\/\/ console.log(num2.value)
\n\/\/ },1000)<\/p>\n
\/\/\u5b9a\u4e49\u5b57\u7b26\u4e32
\nlet str = "Hello,Uni-app"
\n\/\/\u5b9a\u4e49\u6570\u7ec4
\nlet arr = ref([1,2,3])
\n\/\/\u5b9a\u4e49\u5bf9\u8c61
\nlet obj = ref({"name":"Tim","age":18})
\n\/\/\u4fee\u6539\u5bf9\u8c61\u67d0\u4e2a\u5c5e\u6027\u7684\u503c
\nobj.value.name = "Jim"<\/p>\n
<\/script> <\/p>\n
\u6548\u679c：<\/p>\n
<\/p>\n
\u53ef\u7b80\u5199\u4e3a\u4e00\u4e2a\u5192\u53f7：<\/p>\n
\u5192\u53f7\u540e\u9762\u63a5\u5c5e\u6027\u540d，\u6bd4\u5982id，class,style\u3002<\/p>\n
\u793a\u4f8b\u4ee3\u7801：<\/p>\n
<template>
\n<view>
\n<image :src="picUrl"><\/image>
\n<\/view>
\n<\/template><\/p>\n
<script setup>
\nimport {ref} from "vue"
\nlet arr = ref(["\/static\/pic1.png","\/static\/pic2.png","\/static\/pic3.webp","\/static\/pic4.jpg"])
\nconst picUrl = ref("\/static\/pic1.png")
\nlet i = 0
\nsetInterval(()=>{
\ni++
\npicUrl.value=arr.value[i%4]
\n},1000)
\n<\/script><\/p>\n
<style lang="scss"><\/p>\n
<\/style> <\/p>\n
<view class="box" :class="isActive?'active':''"> v-bind\u6307\u4ee4<\/view>
\n<view class="box" :style="{width:'300px',height:260+'px',fontSize:size+'px'}"> \u5185\u8054\u6307\u4ee4<\/view> <\/p>\n
const isActive = ref(false)
\nconst size = ref(30)
\nsetInterval(()=>{
\ni++
\nisActive.value=!isActive.value
\n\/\/size.value+=i
\n},1000)<\/p>\n
\/\/css\u4ee3\u7801
\n<style lang="scss">
\n.box{
\nbackground: orange;
\nwidth: 200px;
\nheight: 200px;
\nfont-size: 20px;
\n}
\n.active{
\nbackground: green;
\ncolor: #fff;
\n}
\n<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb1k\u6b21\u3002\u63a5\u6536\u53c2\u6570\uff0c\u5e76\u5c06\u5176\u5305\u88f9\u5728\u4e00\u4e2a\u5e26\u6709\u3002\u5728\u7ec4\u5408\u5f0f API \u4e2d\uff0c\u63a8\u8350\u4f7f\u7528\u3002\u4e00.\u4f7f\u7528ref\u5b9a\u4e49\u54cd\u5e94\u5f0f\u53d8\u91cf\u3002\u5c5e\u6027\u7684 ref \u5bf9\u8c61\u4e2d\u8fd4\u56de\u3002\u51fd\u6570\u6765\u58f0\u660e\u54cd\u5e94\u5f0f\u72b6\u6001\uff0c\u4e8c.v-bind\u6307\u4ee4\u3002<\/p>\n","protected":false},"author":2,"featured_media":39309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[387,371,305],"topic":[],"class_list":["post-39310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-uni-app","tag-371","tag-305"],"yoast_head":"\n