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中的 ...
随机推荐
- springboot后台控制重定向
第一种方式: 1. 使用 @Controller 注解而不是 @RestController 2.方法上不要加 @ResponseBody 然后直接返回你要去的页面 比如 return & ...
- git与github工具使用
这篇文章主要的目标是用较少的时间学习Git和GitHub的基本使用.在足够一般使用的前提下,尽量减少命令.如果需要其他命令,到时候再去其他地方了解就行了. 总概:所有命令前都要加 git,如下的ini ...
- git上传
#1.Git 全局设置: git config --global user.name "skbarcode" git config --global user.email &quo ...
- textarea跟随内容自动伸缩高度实现方案
监听input事件,然后将textarea的style.height设置为最低高度(19px),进而获取到元素的scrollHeight,然后将scroolHeight设置为style.height
- sudo命令
su命令 switch user的缩写, 意为切换至指定用户执行命令 常用选项 -c<指令>或--command=<指令>:执行完指定的指令后,即恢复原来的身份: -f或——f ...
- Codeforces Round #129 (Div. 1)E. Little Elephant and Strings
题意:有n个串,询问每个串有多少子串在n个串中出现了至少k次. 题解:sam,每个节点开一个set维护该节点的字符串有哪几个串,启发式合并set,然后在sam上走一遍该串,对于每个可行的串,所有的fa ...
- Activiti之流程通过、驳回、会签、转办、中止、挂起等核心操作封装(Activiti5.9)
http://blog.csdn.net/rosten/article/details/38300267 package com.famousPro.process.service.impl; imp ...
- nodejs 从部署到域名访问
一.Node.js 安装在Ubuntu上 用如下代码下载nodejs 8.x最新版并安装,npm 也会随着一起安装 curl -sL https://deb.nodesource.com/setup_ ...
- 调用 js 生成图片二维码
一.js 生成二维码: 首先,需要引用 jQuery 和 jquery.qrcode.js.然后: //生产二维码 $("#qrcodeCanvas").qrcode({ rend ...
- java对象深度拷贝
如何利用序列化来完成对象的拷贝呢?在内存中通过字节流的拷贝是比较容易实现的.把母对象写入到一个字节流中,再从字节流中将其读出来,这样就可以创建一个新的对象了,并且该新对象与母对象之间并不存在引用共享的 ...