微信小程序开发（交流QQ群：604788754）

WXML:

<view class="body-view">

    <switch bindchange="switch1Change"/>

</view>

<view wx:if="{{shows==true}}">

随着switch组件切换来显示

</view>

JS:

Page({

  data:{

    shows:false

  },

  switch1Change:function(e){

    this.setData({

      shows:e.detail.value

    });

  }

})

用switch组件控制一个元素的显示和隐藏状态的更多相关文章

  1. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  2. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  3. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  4. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  5. jquery控制一个元素是否显示

    比如说我有一个id为dlg-buttons的div元素. 我可以通过 $('#dlg-buttons').show(); 让他显示出来: 可以通过 $('#dlg-buttons').hide(); ...

  6. JQuery：怎么动态切换一个元素的显示、隐藏呢？原来隐藏就显示，原来显示就隐藏

    使用toggle() 方法:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"& ...

  7. ng指令控制一个元素的影藏的与显示几种方法的使用

    在ng中我们控制一个元素的显示与隐藏的方法: (1):ng-show=true/false 解释:ng-show使用的是display="block"/"none&quo ...

  8. jQuery判断元素是否显示与隐藏

    jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidd ...

  9. asp.net core根据用户权限控制页面元素的显示

    asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...

随机推荐

  1. 《CSS世界》读书笔记（十六）

    <!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...

  2. PLS-00357: Table,View Or Sequence reference 'SEQ_TRADE_RECODE.NEXTVAL' not allowed in this context

    oracle数据库: 为了使ID自增,建了序列后,创建触发器: create or replace TRIGGER TRIG_INSERT_TRADE_RECODE BEFORE INSERT ON ...

  3. 接触node第一步

    趁着工作不忙,今天来系统记录一下安装node环境: 1.node下载地址为:https://nodejs.org/en/,检查是否安装成功:如果输出版本号,说明我们安装node环境成功:node -v ...

  4. GoldenGate for bigdata 12.3.2.1版本新特性

    在Oracle Tenical Network(OTN)上已经可以下载到最新的ogg4bd版本,地址如下:http://www.oracle.com/technetwork/middleware/go ...

  5. mysql8操作命令（持续更新）

    mysql服务管理 查看服务状态 systemctl status mysqld.service 启动服务 systemctl start mysqld.service 关闭服务 systemctl ...

  6. kafka 控制台命令

    后台启动:bin/kafka-server-start.sh config/server.properties > /dev/null 2>&1 & 启动生产者:bin/k ...

  7. ASCII对应码表-键值（完整版）

    ASCII对应码表-键值(完整版) Bin (二进制) Oct (八进制) Dec (十进制) Hex (十六进制) 缩写/字符 解释 0000 0000 00 0 0x00 NUL(null) 空字 ...

  8. 微信小程序表单验证

    参考:http://www.cnblogs.com/zhangxiaoyong/p/10166951.html

  9. Spark机器学习基础二

    无监督学习 0.K-means from __future__ import print_function from pyspark.ml.clustering import KMeans #from ...

  10. input清空和select重置

    在添加成功之后,再次打开模态框添加数据,需要清空input和重置select标签 清空div下所有input的输入内容 $("#divId input").val("&q ...