weex-12-组件switch

本节任务

  • 设置开关状态
  • 设置不可用状态
  • 修改背景
  • 获取开关状态

本节内容比较简单,创建一个switch.vue 来写本节的内容, 注意一点,本节内容请务必使用真机测试

1.设置开关状态

<switch class="switch" checked="false"> </switch>

B0A53B84-D3B0-4881-8B59-154E513BD5B0.png

 <switch class="switch" checked="true"> </switch>

2B5F659C-D0D3-4EBB-BEA0-C6655F1738E9.png

2.设置不可用

<switch class="switch" checked="true" disabled="true"> </switch>

25271CF7-9485-450F-A1FF-2F09ACC4C53F.png

3.设置背景颜色

 .switch{
    border-radius: 35px;
    background-color: red;
}

B358A296-2037-4665-AA63-19DB25E6E532.png

4.获取改变的状态 监测change事件

<switch class="switch" checked="true" disabled="false" @change="change"> </switch>

事件监测

<script>
    export default{
        methods:{
            change(e){
            console.log(e.value)
        }
      }
  }
</script>

当开关的状态改变的时候会触发change方法 传入参数e,通过获取value的值,可知道当前switch的开关状态,值为true/false

由于H5 无法获取到系统的颜色,所以开发者将switch的颜色做成了iOS 系统默认的颜色,暂时无法更改,请大家尽量使用系统效果!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云加头条

如何开通微信公众号同步?(浏览器打开)

截屏小Tip:可同时按住开机键+home键,完成截屏

67010
来自专栏Play & Scala 技术分享

[Play-Scala-2.2.1] 接收jQuery Post的原始字符串请求

3208
来自专栏腾讯云serverless的专栏

使用腾讯云 SCF 云函数压缩 COS 对象存储文件

如何处理 COS 对象存储中的大量文件打包需求?或许 SCF 无服务器云函数能助你一臂之力!

1.9K2
来自专栏大神带我来搬砖

在自定义组件中使用v-model

遇到一个需求,关键词列表是用逗号分隔的字符串,最多三个关键词,为了在vue中对这个关键词列表进行编辑,可以将其定义为一个组件,组件中有3个input.用v-mo...

3415
来自专栏杨龙飞前端

bootstrap file input 官方文档翻译

4747
来自专栏Golang语言社区

go语言读取csv文件并输出的方法

本文实例讲述了go语言读取csv文件并输出的方法。分享给大家供大家参考。具体实现方法如下: package main import ( "encodi...

3788
来自专栏Spring相关

在Vue的webpack中结合runder函数

npm i vue-loader vue-template-compiler -D

732
来自专栏极乐技术社区

极乐问答No.1 | 如何理解微信小程序的生命周期?

导语 通俗的讲,生命周期就是指一个对象的生老病死。 从软件的角度来看,生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信小程...

2537
来自专栏十月梦想

Vue动态组件绑定和v-once

        向上述就是那个符合条件显示在dom中,不符合的则直接在dom中销毁,这样是比较性能地下,如何正确的使用呢?可以加载一个v-once属性

2021
来自专栏静默虚空的博客

Intellij IDEA 使用小结

快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键。在这个主题中,您可以找到最不可缺少的列表,使 I...

3096

扫码关注云+社区

领取腾讯云代金券