uniapp组合式和选项式

组合式:

javascript 复制代码
<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

// 响应式数据
const count = ref(0)
const list = ref([])
const inputValue = ref('')

// 计算属性
const filteredList = computed(() => {
  return list.value.filter(item => item.includes(inputValue.value))
})

// 生命周期钩子
onMounted(() => {
  console.log('组件挂载完成')
})

onLoad(() => {
  console.log('页面加载')
})

onShow(() => {
  console.log('页面显示')
})

// 方法
const increment = () => {
  count.value++
}

const fetchData = async () => {
  try {
    const res = await uni.request({
      url: ''
    })
    list.value = res.data
  } catch (error) {
    console.error('请求失败:', error)
  }
}

const handleInput = (e) => {
  inputValue.value = e.detail.value
}
</script>

<template>
</template>

选项式:

javascript 复制代码
<template>
</template>

<script setup>
export default{
    components: {
		},
    data() {
			return {
           };
           },
    onShow(){
    },
    methods:{
    },
    onLoad(){
    }
};
</script>


<style scoped>

</style>
相关推荐
usdoc文档预览5 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
Java小卷5 小时前
面向 schema 编程,轻松搞定 Element 虚拟化表格复杂应用场景
vue.js·低代码·element
仨孩子的爹7 小时前
Lodop、hiprint 与 vue-print-designer:打印控件选型对比
vue.js
程序员大阳9 小时前
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口
javascript·css·html·实战·删除·查询·新增
炫酷的大高个9 小时前
6 亿播放的闪身步,我用前端算出 15 倍重心差
前端·javascript
林小帅10 小时前
【笔记】Prisma v7 + SQLite TS2305 及连锁 TS7006 问题
前端·javascript·后端
ruanno_top10 小时前
四个 canvas 组件,在 2 倍屏上一直是糊的
vue.js
Dumbness10 小时前
订阅消息弹窗必须在用户点击里调:联调实验室里 timing 和 Mock 支付通知踩的坑
javascript·uni-app
ruanno_top10 小时前
一个脏数据能让整条折线消失:图表组件的四种数据契约
vue.js
黄连木笛10 小时前
不改一行 Postman 源码,把它汉化了:Electron preload 注入 + fetch 拦截实战
javascript·electron