MVC架构小案例选项卡手风琴消息发送显示隐藏/销毁

手风琴

 <div id="box"></div><script>let box = document.querySelector("#box")// 1/ modellet model = {list: [{id: 0,title: "言情小说",idshow: false,children: [{id: 1001,book: "霸道总裁"}, {id: 1002,book: "我的乞丐男友"}, {id: 1003,book: "青蛙变王子"}, ]}, {id: 1,title: "武侠小说",idshow: false,children: [{id: 2001,book: "九阴真经"}, {id: 2002,book: "江湖之路"}, {id: 2003,book: "绿林好汉之王"}, ]}, {id: 2,title: "玄幻小说",idshow: false,children: [{id: 3001,book: "飞"}, {id: 3002,book: "遁"}, {id: 3003,book: "咳"}]}]}// 2/ viewfunction rander() {box.innerHTML = `${model.list.map(item=>`<h3 onclick="btn(${item.id})">${item.title}${item.idshow?"-":"+"}</h3>${item.children.map(ic=>`   <p style="display:${item.idshow?'':'none'}">${ic.book}</p>  `).join('')}`).join('')}`}           //style="display: none;"rander()// 3/ controllerfunction btn(id){for (const obj of model.list) {if(obj.id==id){obj.idshow=!obj.idshow}}rander()}</script>

显示隐藏/销毁## 标题

 <div id="box"></div><script>let box = document.querySelector("#box")// 1、数据 modellet model = {isshow: true,isif: true}//2 、视图 viewfunction rander() {// style="display: none;"box.innerHTML = `<div><p style="display:${model.isshow ? "" : "none"}">show</p>${model.isif ? `<p>if</p>` : ""}<button οnclick="btnshow()">v-show</button>    <button οnclick="btnif()">v-if</button>   </div>`}rander()//3、控制器 controller  function btnshow() {model.isshow = !model.isshowrander()}function btnif() {model.isif = !model.isifrander()}</script>

消息发送

 <div id="box"></div><script>let box = document.querySelector("#box")// 1、数据 modellet model = {list: [{id: 0,text: "这是内容"}, {id: 1,text: "这是内容2"}, ]}//2、视图 viewfunction rander() {box.innerHTML = `<div>${model.list.map(item=>`<p>${item.text}</p>`).join('')}<input id="iptval"/><button  onclick="btn()">发送</button></div>`}rander()//3、控制器 controllerfunction btn(){model.list.push({id:model.list.length,text:iptval.value})rander()}</script>

选项卡

  <div id="box"></div><script>let box = document.querySelector("#box")// 1/model 数据let model = {list: [{id: 0,text: "内容1"}, {id: 1,text: "内容2"}, {id: 2,text: "内容3"}]}// 2、view视图function rander() {box.innerHTML = `<div><span οnclick="btn('one')">选项卡1</span><span οnclick="btn('two')">选项卡2</span><span οnclick="btn('three')">选项卡3</span></div><div>${model.list.map(item => `<span>${item.text}</span>`)}</div>`}rander()// 3、控制器controllerfunction btn(one) {console.log(one);let res;switch (one) {case "one":res = [{id: 0,text: "内容1"}, {id: 1,text: "内容2"}, {id: 2,text: "内容3"}]break;case "two" :res=[{id: 0,text: "内容4"}, {id: 1,text: "内容5"}, {id: 2,text: "内容6"}]break;case "three" :res=[{id: 0,text: "内容7"}, {id: 1,text: "内容8"}, {id: 2,text: "内容9"}]break;}model.list=resrander()}</script>
</body>

MVC架构小案例选项卡手风琴消息发送显示隐藏/销毁相关推荐

微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
flutter-架构项目-getx-快速案例分分钟实现MVC架构-新闻案例
直接上代码,不知道getx 的自习学习下面是View 层其他的自己想吧 MVC架构 class NewSPage extends StatelessWidget {final logic = Get ...
记录--微信小程序,uniapp,H5端发送,显示emoji表情
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助小伙伴们,在开发中有没有遇到过发布帖子或者实时聊天需要发送到一些emoji表情的. 但是每当我们直接将emoji表情提交到后台的接口又会报 ...
jQuery小案例之鼠标滑过显示对应的精品推荐
先来看一下效果: 代码部分: html: 分为左中右三部分,三部分均由列表实现. <div id="container"><div id="left&q ...
微信小程序复杂条件判断按钮显示隐藏
背景概述: 第二个和第三个view根据条件判断显示,第一个view根据条件判断是否在任一页面显示. <view class="root"><view wx:if= ...
rocketmq 消息自定义_RocketMQ的消息发送及消费
RocketMQ消息支持的模式: 消息支持的模式分为三种:NormalProducer(普通同步),消息异步发送,OneWay. 消息同步发送: 普通消息的发送和接收在前面已经演示过了,在前面的案例中 ...
【微信小程序】实战案例 -- 向订阅用户发送消息（范例：报名提醒）
范例场景描述活动发起人发起了一场活动,在有人通过微信小程序报名活动时,活动发起人/活动报名审核人员希望可以收到一条报名处理提醒消息. 实现流程 1. 选用订阅模板登录到小程序后台找到满足需求的模 ...
javascript的MVC三层架构（案例之分页插件）
javascript的MVC三层架构(案例之分页插件) 作者:田想兵博客地址:http://www.cnblogs.com/tianxiangbing 最近很少写博文,一是比较忙,二是没啥心情,好, ...
【JAVA】基于MVC架构Java技术荟萃案例演练
基于JAVA-MVC技术的顾客管理项目案例总结作者白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...

MVC架构小案例选项卡手风琴消息发送显示隐藏/销毁

手风琴

显示隐藏/销毁## 标题

消息发送

选项卡

MVC架构小案例选项卡手风琴消息发送显示隐藏/销毁相关推荐

最新文章

热门文章

MVC架构 小案例 选项卡 手风琴 消息发送 显示隐藏/销毁

手风琴

显示隐藏/销毁## 标题

消息发送

选项卡

MVC架构 小案例 选项卡 手风琴 消息发送 显示隐藏/销毁相关推荐

最新文章

热门文章

MVC架构小案例选项卡手风琴消息发送显示隐藏/销毁

MVC架构小案例选项卡手风琴消息发送显示隐藏/销毁相关推荐