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>
相关推荐
01漫游者36 分钟前
JavaScript函数与对象增强知识
开发语言·javascript·ecmascript
threelab2 小时前
Three.js 代码云效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
yqcoder4 小时前
JavaScript 柯里化:把“大餐”拆成“小炒”的艺术
开发语言·javascript·ecmascript
每天吃饭的羊4 小时前
JSZip的使用
开发语言·javascript
前端老石人4 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
不可能的是5 小时前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript
Python私教5 小时前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源
Rkgua6 小时前
事件流模型是什么和DOM事件模型等关系
javascript
W.A委员会6 小时前
多行溢出在末尾添加省略号
开发语言·javascript·css
拉里呱唧7 小时前
一个像在使用PPT的在线 HTML 编辑器:HeyHTML
javascript·交互·html5