分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

vue.js ??v-if 控制true/false

发布时间:2023-09-06 02:21责任编辑:傅花花关键词:js

通过v-if 控制true/false  可以使两个DIV隐藏显示切换

Html部分

 ???<div id="index-content"> ???????<div> ???????????<a @click="showNewGoodsTab">点击板块一显示板块二隐藏</a> ???????????<a @click="showOftenRouteTab">点击板块二显示板块一隐藏</a> ???????</div> ???</div> ???????<!-- 包含两个板块的DIV --> ???<div class="mui-content"> ???????<!-- 板块一 --> ???????????<div v-if="new_goods_show">板块一</div> ???????<!-- 板块二 --> ???????????<div v-if="often_route_show">板块二</div> ???</div>
View Code

Js部分

 ???????????????var pub_index_content = new Vue({ ???????????????????el:"#index-content", ???????????????????data:{ ???????????????????????new_goods_show:true, ???????????????????????often_route_show:false ???????????????????}, ???????????????????methods: { ???????????????????????showNewGoodsTab: function() { ???????????????????????????this.new_goods_show = true; ???????????????????????????this.often_route_show = false; ???????????????????????}, ???????????????????????showOftenRouteTab: function() { ???????????????????????????this.new_goods_show = false; ???????????????????????????this.often_route_show = true; ???????????????????????} ???????????????????} ???????????????})
View Code

vue.js ??v-if 控制true/false

原文地址:https://www.cnblogs.com/cp123/p/9938467.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved