想请教大家，一个关于vue3写法的问题？谢谢大家？

• Z时代
• 2024-03-04
• 分类：IT

<template>
    <div>
        <!-- 右边菜单 -->
        <div class="right-window" :class="{ hide: !showMenu }">
            <!-- 头部 -->
            <div class="site" @click="click_index">
                <image src="../static/images/shou_logo.jpg" style="width: 316rpx;height: 62rpx;"></image>
            </div>
            <!-- 导航 -->
            <template v-if="store.categorys.length > 0">
                <div style="display: flex;margin: 30rpx;padding: 15rpx;">
                     <el-select v-model="value" filterable placeholder="请输入内容" @change='change'>
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </div>
                <right-menu @select="select" :activeKey="activeKey" />
            </template>
            <!-- 底部 -->
            <div class="footer">
                <a class="link" href="https://beian.miit.gov.cn/" target="_blank" type="primary">@{{ siteYear }}
                    {{ siteNumber }}</a>
            </div>
        </div>
        <!-- 小屏幕显示菜单按钮 -->
        <match-media v-if="!showMenu" :max-width="956">
            <div class="left-icon">
                <Icon color="#a6a6a6" :size="28">
                    <ChevronCircleLeft @click="showRightMenu" />
                </Icon>
            </div>
        </match-media>
        <!-- 抽屉遮罩 -->
        <bg-cover :show="showCover && showMenu" :top="60" @click="showMenu = false" />
    </div>
</template>
<script>
    export default {
    data() {
      return {
        options: [],
        value: ''
      }
    },
    methods: {
        change(e){
            router.navigateTo(`index/index?category=${e}`)
        },
        click_index(){
            router.navigateTo(`index/index?category=常用功能`)
        }
    },
    mounted() {
        call('category_search', {
        }).then(res => {
            this.options = res.data.sort((a, b) => {
            if (a.value.startsWith("如何")) {
                return -1;
            }
            if (b.value.startsWith("如何")) {
                return 1;
            }
            return a.value < b.value ? -1 : 1;
        })
            console.log(res.data,9999) 
        })
        const device = navigator.userAgent
        console.log(device,999)
        if (device.indexOf('iPad') > -1) {
          //  ipad 
            this.is_pc = false
          } else if (device.indexOf('Android') > -1 || device.indexOf('iPhone') > -1) {
          // 手机
            this.is_pc = false    
            console.log(this.showMenu,'showMenu')
            this.showMenu = true
            this.showCover = true
            console.log(this.showMenu,'showMenu')
            // this.is_pc = true    
          } else {
          // 电脑
            this.is_pc = true
            // this.is_pc = false
          }
    }
  }
</script>    
<script setup>
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        useStore
    } from '@/stores/index.js'
    import {
        Icon
    } from '@vicons/utils'
    import {
        ChevronCircleLeft,
        Search
    } from '@vicons/fa'
    import rightMenu from './components/rightMenu.vue'
    import {
        siteName,
        siteYear,
        siteNumber
    } from '@/config/site.js'
    const store = useStore()
    const category = ref('')
    uni.$on('setRightStyle', obj => {
        if (obj.type === 'showRightMenu') {
            showMenu.value = obj.data.showMenu
            showCover.value = obj.data.showCover
        }
        if (obj.type === 'putRightMenuActiveKey') {
            activeKey.value = obj.data
        }
        onLoad(options => {
            category.value = options.category;
        })
    })
    const showMenu = ref(false)
    const showCover = ref(false)
    const activeKey = ref('')
    const keywords = ref('')
    const showRightMenu = () => {
        showMenu.value = true
        showCover.value = true
    }
    const select = () => {
        if (showCover.value) {
            showMenu.value = false
        }
    }
</script>

<script setup> 里有showMenu 和 showCover

我想判断是否是手机端，如果是手机端 就在mounted 里写
this.showMenu = true
this.showCover = true

但是我发现这样没有生效，请问如何改这种值？

回答：

既然使用了setup为啥还要混着options的写法呢，建议直接在setup中写mounted的逻辑

import { onMounted } from 'vue'
onMounted(() => {
   if (手机端) {
     showMenu.value = true
     showCover.value = true
   }
})

回答：

<script setup>中声明的值不与 option 写法中的 data 互通，只能在其中一种写法中修改

以上是 想请教大家，一个关于vue3写法的问题？谢谢大家？ 的全部内容， 来源链接： utcz.com/p/933458.html