vue 控制视图
<!--第一种:点击改变容器的值-->
<li>
<a href="javascript:void(0)" @click="state.box_status = 'language'">语言</a>
</li>
<li>
<a href="javascript:void(0)" @click="state.box_status = 'equipment'">设备</a>
</li> <!--与容器的值相对应则显示-->
<div v-show="state.box_status == 'language'">
视图一
</div>
<div v-show="state.box_status == 'equipment'">
视图二
</div>
<!--第二种:点击改变容器的值-->
<select v-model="state.user_arg">
<option value="1">添加参数</option>
<option value="2">替换所有参数</option>
<option value="3">移除与以下内容完全一致的参数</option>
</select>
<div v-show="state.user_arg == 1">
视图一
</div> <div v-show="state.user_arg == 2">
视图二
</div> <div v-show="state.user_arg == 3">
视图三
</div>
<!--如果判断语句少写一个等号,会报 You may have an infinite update loop in a component render function 大意是无限更新循环--> 第一次写好紧张
vue 控制视图的更多相关文章
- vue 路由视图,router-view嵌套跳转
实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...
- laravel4通过控制视图模板路劲来动态切换主题
通过控制视图模板路劲来动态切换主题 App::before(function($request) { $paths = Terminal::isMobile() ? array(__dir__.'/v ...
- vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- angular学习笔记(八)-控制视图显示隐藏
本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐 ...
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 031——VUE中表单控件处理之使用vue控制input和textarea表单项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【Android】ViewModel+LiveData:更加直接地控制视图的方式
目录 LiveData 前言 使用ViewModel+LiveData LiveData 前言 ViewModel通过将UI data保存在ViewModel类实例的内部,从而大大地将MVC中的 ...
随机推荐
- 2018-2019-2 20165303《网络攻防技术》Exp5 MSF基础应用
实践目标 1.一个主动攻击实践 ms17_010(成功) ms08_067(成功) 2.一个针对浏览器的攻击 ms13-008(成功唯一) ms11-050(失败) ms13-069(成功唯一) ad ...
- Exception in thread "main" SettingsException[Failed to load settings from [elasticsearch.yml]]; nested: ElasticsearchParseException[malformed, expected end of settings but encountered additional conte
D:\elasticsearch\elasticsearch-2.4.0\bin>elasticsearchException in thread "main" Settin ...
- 【Java】【11】String数组和List相互转换
正文: 1,String[]转List String[] strs = {"aa", "bb", "cc"}; //String数组 //方 ...
- Mac OS X 操作系统下JDK安装与环境变量配置
1. 下载JDK. 去oracle官网的Java SE Downloads页面(如图 1),下载Mac os版本JDK(如图 2): 图 1 图 2 2. 安装JDK. 下载完成后,双击.dmg文 ...
- CQRS粗浅理解
CQRS(命令查询责任分离)是一种奇特的模式,表示解耦系统的输入和输出. 通常情况下,输入端将数据写到数据库,输出端从数据库查询.与读写锁的场景类似,写的过程中不能读.正常情况下没有问题,但是在大规模 ...
- ldap 导出、导入ldif数据
ldap 导出.导入ldif数据有如下方式: 1.dsadm(速度快,需要停止ldap实例) 2.dsconf(速度慢,需要保持ldap实例开启) windows导出.导入需要加上参数--unsecu ...
- eclipese的一些卡顿问题
一,在jsp页面上输入拼音的时候很卡顿怎么办? 二,我们在复制粘贴等用到ctry的时候会很卡顿,尤其是在jsp页面.干掉以下就好了.
- ES6 memo
一.热门问题 介绍redux,主要解决什么问题 是管理应用程序状态的库,解决数据管理和数据通信的问题 Promise.Async有什么区别 Async 更简洁,不需要用 then 连接 Promise ...
- Kali Linux搭建Go语言环境
准备: (1)Kali Linux系统(此实验为VMware环境) (2)Go语言安装包 具体过程: (1)到官网下载Go语言安装包,如图示操作(官网可能需要梯子,没有的可以从国内相关网站下载) ( ...
- 总结AWS使用要点
最近做毕业设计,要用AWS跑代码,以前只用过一次,这次踩了很多坑,记录一下.. AWS命令行管理S3 bucket AWS官方文档: http://docs.amazonaws.cn/cli/late ...