精华内容
下载资源
问答
  • 2021-07-11 22:55:26

    使用vue控制元素显示隐藏

    HTML代码:

     <div title="意向价格"   v-if="showPrise"></div>
     
     <div title="意向租金"   v-show="showRentPrise"></div>
    

    JS代码:

    	new Vue({
    	    el: '#app',
    	    data: {
    	        showPrise:false,
    	        showRentPrise:false
    	     } 
    	    methods: {
    		   changeStatus(){
    			  if("你设置的条件"){
    			      this.showPrise = true;
    			      this.showRentPrise = true;  
                  }
               }
            }
    	 })
    

    解释:

    默认showPriseshowRentPrise的状态是false,所以是隐藏的。
    当你在changeStatus通过了某种条件,你就可以控制showPriseshowRentPrise的状态了。true为显示,false为隐藏。
    注意点:

    v-if控制 DOM的删除和添加,不同于v-show对DOM的显示和隐藏

    更多相关内容
  • 不懂语法,写法粗糙,用作个人小记。需求原因,展示的按钮分开,会更利于操作。 测试效果: 项目效果:

    不懂语法,写法粗糙,用作个人小记。

    需求原因,展示的按钮分开,会更利于操作。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试</title>
    		<script src="./public/js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<div v-show="conShow">君不见高堂明镜悲白发,朝如青丝暮成雪。</div>
    			<button @click="click1" v-show="conShow2">收起</button>
    			<button @click="click1" v-show="conShow3">展示</button>
    		
    		</div>
    	</body>
    	<script type="text/javascript">
    		new Vue({
    		    el: '#app',
    		    data() {
    			  return {
    				conShow:true,
    				conShow2:true,
    				conShow3:false,
    			  }
    			},
    			methods:{
    			    click1(){
    					this.conShow = !this.conShow;
    					this.conShow2 = !this.conShow2;
    					this.conShow3 = !this.conShow3;
    				},
    			}
    		});
    	</script>
    </html>
    

    测试效果:

     项目效果:

     

    展开全文
  • 1.js vue控制样式div显示隐藏 ①样式: .problem1 { display: none; width: 100%; height: 100%; overflow: hidden; position: relative; } .problem1 active { width: 100%; height: 100%; } .problem1.active { ...

    1.js vue控制样式div显示和隐藏
    ①样式:
    .problem1 {
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    }
    .problem1 active {
    width: 100%;
    height: 100%;
    }
    .problem1.active {
    display: block;
    }
    ②调用:
    this.toggle1(this.t1, this.i1);
    //t1为t1: document.getElementsByClassName(“problem1”),一个包含所有class为problem1的div数组;i1为下标。
    ③方法:
    toggle1(eles, active) {
    for (let i = eles.length; i–; ) {
    eles[i].className = “problem1”; //先让所有div隐藏
    }
    eles[active].className = “problem1 active”; //再让被点击的序号对应的div 显示
    },
    ④前后页调用:
    按钮:




    <el-button
    class=“prev”
    @click=“previous_page”
    type=“info 300%”
    slot=“reference”
    round
    >上一页
    <el-button class=“btn” @click=“change_page(0)”>1
    <el-button class=“btn” @click=“change_page(1)”>2
    <el-button class=“btn” @click=“change_page(2)”>3
    <el-button class=“btn” @click=“change_page(3)”>4
    <el-button class=“btn” @click=“change_page(4)”>5
    <el-button class=“btn” @click=“change_page(5)”>6
    <el-button
    class=“next”
    @click=“next_page”
    type=“info 300%”
    slot=“reference”
    round
    >下一页


    方法:
    previous_page() {
    this.nowPage–;
    if (this.nowPage === -1) {
    this.nowPage = this.aBtn.length - 1;
    }
    this.toggle(this.aIem, this.nowPage);
    console.log(“上一页”);
    },
    next_page() {
    this.nowPage++;
    this.nowPage %= this.aBtn.length;
    this.toggle(this.aIem, this.nowPage);
    console.log(“下一页”);
    },
    change_page(index) {
    for (let i = this.aBtn.length; i–; ) {
    this.change_page_plus(index);
    }
    console.log(“第” + (index + 1) + “页”);
    },
    change_page_plus(index) {
    this.toggle(this.aIem, index);
    this.nowPage = index; //被点击后,保存当前页的序号
    },
    定义:
    aBtn: document.getElementsByClassName(“btn”),
    aIem: document.getElementsByClassName(“item”),
    prev: document.getElementsByClassName(“prev”),
    next: document.getElementsByClassName(“next”),
    nowPage: 0, //定义当前页,默认值为0;
    样式:
    .group > label {
    / 选中状态/
    color: #1770e6;
    font-size: 13px;
    padding: 7px 14px;
    / border: 1px solid #1770e6;/
    / font-weight: Medium;/
    }
    .item active {
    width: 100%;
    height: 100%;
    }

    .item {
    display: none;
    width: 100%;
    /height: 100%;/
    overflow: hidden;
    position: relative;
    }

    .item > img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }
    .btn {
    background-color: #67c23a;
    }
    .item.active {
    display: block;
    }
    2.定时(当浏览器页面加载完成后退出):
    this.numberSql(this.id_number);
    this.interval = setInterval(this.ht, 1000);
    ht() {
    //获取当前页面状态
    const status = document.readyState;
    console.log(“进入:” + status + this.i);
    this.i++;
    if (status === “complete”) {
    //当前页面加载完毕后执行
    //设置制度目录树的选中效果和列表中表单显示情况
    this.toggle1(this.t1, this.i1);
    this.toggle2(this.t2, this.i2);
    this.toggle3(this.t3, this.i3);
    this.toggle4(this.t4, this.i4_1, this.i4_2);
    this.toggle5(this.t5, this.i5_1, this.i5_2);
    this.toggle6(this.t6, this.i6_1, this.i6_2);
    this.toggle6_1(this.t6, this.i6_3);
    // alert(“demo”);
    clearInterval(this.interval); //退出定时执行方法状态
    }

    展开全文
  • vue 控制元素的显示隐藏

    万次阅读 2019-08-21 19:07:30
    使用v-show 和v-if 都可以实现元素显示隐藏 v-if 会直接删除元素 v-show 只是隐藏,只是简单地切换元素的 CSS 属性display。 <divv-show="showGroup"> <divclass="formTitle">图层组</div>...

    解决方案:

    •  使用 v-show  和 v-if  都可以实现元素显示和隐藏
    • v-if 会直接删除元素
    • v-show 只是隐藏,只是简单地切换元素的 CSS 属性display。

       <div v-show="showGroup">
            <div class="formTitle">图层组</div >
        </div >

    比如想要隐藏 上面这个div  那么给这个div加一个  v-show的属性。名字你随便起

    然后再js代码中  设置 showGroup的默认值 为false,也就是刚启动的时候,默认是不显示的,后面如果想要显示这个div,那么可以直接设置vm.showGroup=true即可

    展开全文
  • 1.首先在所需要隐藏显示的内容div加v-show,代表判断是否显示隐藏 <div v-show="shopShow">内容</div> 3.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件 &...
  • 点击一个div获取到他的坐标 使一个button定位到div上 然而button一开始是v-if false 注销状态 点击之后才为true显示的。点击其他事件 button注销掉(不点击本身的div)。页面中有很多事件,总不能给每一个事件加上...
  • v-show="true/false" //控制元素显示/隐藏 示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> [removed][removed] <script
  • Vue控制元素的显示隐藏

    千次阅读 2020-12-24 19:33:50
    本篇文章我们通过Vue的标签来控制指定元素的因此与显示,直接来看相关的实现代码:Hello 公众号:"程序新视界"!var app = new Vue({el: '#app',data: {isShow: true}})通过代码我们可以看到div元素上使用了vue的v-...
  • 今日,怂怂就来说说,在项目中刚遇到这么一个功能需求; 描述:当下拉选择不同的属性选项,...代码实现 vue.js: //定义一个select下拉菜单 类型> 表结构变更 value=tableChange> <el-option label=接口变更 va
  • VUE 如何动态隐藏显示DIV元素

    千次阅读 2020-08-28 18:41:40
    今天在开发过程中遇到需求: 根据选择标签,动态变换提示内容 ...div title="" v-if="flag"></div> 使用v-if 定义flag值 在需要更换内容事件内,将flag赋值即可 false不展示,true展示
  • 平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo <!-- 按钮 --> <button @click.stop=ShowHidden...
  • vue控制元素的隐藏显示

    千次阅读 2021-04-29 15:49:35
    vue中动态控制元素的隐藏显示 <template> <div @click="clickbj(i)"> //i 为父元素 for 循环的 index 点击 </div> <div @mouseleave="mouseLeave(i)" class="box" :class="{...
  • // 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行 // el:指的是当前调用这个方法的元素对象 // done:用来决定是否要执行后续的代码如果不执行这个方法,那么将来执行完before执行完enter以后...
  • 创建弹框组件: <template>...div>{{data.pointNum}}</div> </el-drawer> </template> <script> export default { name: 'pointDetail', props: { //父组件传递过来
  • 第一个显示蓝色按钮,代表数据最终状态;其余按钮为灰色,显示数据流转记录。 返回的数据类型 前端页面代码 <div class=leftProcessBox> <div class=leftProcess v-for=(listLZPar,index) v-show=listLZPar....
  • 实现原理: 方法1 <ul id="app"> <li v-for='item in items' @click="toggle(item)"> ...span v-if='item.show'>...new Vue({ el: '#app', data: function() { return { items: [{ .
  • 如下所示: <div class=status_button> 查岗 视频 </div> <!-- 查岗部分显示影藏 --> <div class=check_button class=[this.flag?> 用xinhic</li>
  • vue 控制显示隐藏的两种办法

    千次阅读 2020-10-10 12:28:30
    div class="operate-w" v-if="CanAddTip"> 截至日期已过,不能添加套餐 </div> data: { CanAddTip:false; } //方法里: goSet: function (e) { this.CanAddTip=true; //this.CanAddTip=!this....
  • Vue.component 点击 div盒子 外面区域控制隐藏 需求:选择审批意见(类似下拉框展示),可以删除单条数据
  • div id="app"> <button class="btn" @click="show = !show">click</button> <transition name='fade'> <div class="box1" v-if="show"> <div class="box2"></div>
  • 如果变量或者表达式为true, 会显示标签, 否则隐藏 二. v-if v-if控制标签显示 语法: v-if=“变量或者表达式” v-if通过控制标签是否删除显示 , v-if有性能优势 三. 代码示例 <template> <div> <h1 ...
  • import fireDetailsDialog from "./fireDetailsDialog.vue"; <!-- 火情详情弹框 --> <fire-details-dialog :fireData="fireData" :panelShow.sync="panelShow" ></fire-details-dialog> ...
  • 在此我定义两个属性 v-if=" " <div title="这是操作一" v-if="operation1"></div>...div title="这是操作二" v-if="operation2...new Vue({ el: '#app', data: { operation1:false, operation2:fals
  • 右下角的 圆形按钮,控制左边的全部功能盒子的显示隐藏,要求:点击全部功能盒子以外的任意地方,都能实现隐藏该盒子。 结构部分: 代码部分: 监听事件: watch: { showFlag(newVal, oldVal) { if ...
  • 思路 ...vue2 指令 代码实现 <template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <
  • new Vue({ el: '#app', data: { showOne:false, showTwo:false } methods: { changeStatus(){ if("设置的条件"){ this.showOne= true; this.showTwo= true; } } } })
  • v){ //移除元素 el.parentNode.removeChild(el) } } } } auth.install = function(Vue) { //定义指令名 Vue.directive('auth', auth) } export default auth main.js引入 import auth from '@/directive/...
  • Vue控制表格列的显示隐藏

    千次阅读 2020-11-03 16:57:31
    table控制显示隐藏的功能 当选中时 table列显示,未选中时隐藏该列 首先造轮子 全局拿来用 // 这是子组件 <template> <div style="text-align: right;"> <el-popover placement="right" title...
  • <h5>4.条件if:控制元素显示隐藏</h5> <div class="show"> <img v-if="seen"...
  • Vue动态控制按钮显示隐藏

    万次阅读 2020-06-16 11:56:27
    为了解决这个问题,可以在列表选择时,如果勾选了已经收货确认的订单把收货确认按钮隐藏起来; 前端代码如下: <div v-if="isShow" class="fr of p10" > <button class="mr10 main_btn" @click="confirm"&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,840
精华内容 4,336
关键字:

vue控制div显示隐藏