首页 > 其他分享 >vue tab 切换

vue tab 切换

时间:2022-11-19 10:22:26浏览次数:46  
标签:category vue .. 切换 tab card

<template>
    <view>
        <!-- 内容 -->
        <view class="content_box">
            <view class="content">
                <!-- 分类 -->
                <view class="classification">
                    <text @click="taskSwitch(0)">全部</text>
                    <text @click="taskSwitch(1)">我的发表</text>
                </view>
                <hr>
                <!--  -->
                <view class="whole" v-if="category == 0">
               全部的页面                 
                </view>
                <view class="publish" v-if="category == 1">
                    我的发表
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import card from "../../coponents/card/card.vue"
    export default {
        data() {
            return {
                category: 0,
        }}
        methods: {
            taskSwitch(i) {
                if (i == 0) {
                    this.category = i
                } else {
                    this.category = i
                }
            }
        }
    }
</script>                    

 样式自己调

 

标签:category,vue,..,切换,tab,card
From: https://www.cnblogs.com/0722tian/p/16905543.html

相关文章

  • 后端初学Vue
    一、Vue介绍     二、Vue的使用(1)Vue最简单的方法是引入Vue.js,可以在html中混合使用,如下:html里引入<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2"><......
  • 解决SPA单页面应用(create-react-app,Vue-cli)路由跳转后404的问题。
    在Nginx中配置try_filesserver{listen80;server_namelocalhost;root"****";location/{ try_files$uri$uri/......
  • vue3-cookies
    安装npminstallvue3-cookies--savemain.jsimport{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store......
  • Vue中使用Mock,devSever中before方法弃用>webpack新版本出现的vue.config.js配置问题:op
    话不多说直接上代码:1、mock相关配置(mock/index.js),这里仅使用 setupMiddlewares其余旧版级过渡版本方法见官网1//引入mock2constMock=require('mockjs');......
  • vue后台管理系统"编辑按钮"书写逻辑
    不废话上思路外部el-table-column是基础table模板,里面templateslot-scope的主要作用就是获取table一行的数据信息;其次要加一个对话框,在对话框里输入数值然后提交就可......
  • Vue.js -- 条件渲染
    条件渲染v-if的用法代码演示:<head><title>vue条件渲染</title><!--使用CDN引入Vue--><scriptsrc="https://unpkg.com/vue@next"></script></head><b......
  • MyBatisPlus 多数据源动态切换
    一、官方文档https://baomidou.com/pages/a61e1b/#%E6%96%87%E6%A1%A3-documentation二、操作步骤1、引入依赖版本号在下面 懒得单独复制了 一起贴出来了<!......
  • Vue的基本使用
    引入vue.js<scriptsrc="vue.min.js"></script><scriptsrc="vue-router.min.js"></script>创建vue对象,绑定id<body><divid="app"></div> <scr......
  • 后端程序员必会的前端知识-03:Vue2
    三.Vue21.Vue基础1)环境准备安装脚手架npminstall-g@vue/cli-g参数表示全局安装,这样在任意目录都可以使用vue脚本创建项目创建项目vueui使用图形......
  • Vue第三节
    目录4.通过axios实现数据请求4.2.1数据接口4.2.3ajax的使用4.2.4同源策略4.2.5ajax跨域(跨源)方案之CORS5.组件化开发5.1组件[component]5.1.1局部组件5.1.2默认组......