<!--第一种:点击改变容器的值-->

<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 控制视图的更多相关文章

  1. vue 路由视图,router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  2. laravel4通过控制视图模板路劲来动态切换主题

    通过控制视图模板路劲来动态切换主题 App::before(function($request) { $paths = Terminal::isMobile() ? array(__dir__.'/v ...

  3. vue命名视图实现经典布局

    vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. angular学习笔记(八)-控制视图显示隐藏

    本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐 ...

  5. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 【Android】ViewModel+LiveData:更加直接地控制视图的方式

    目录 LiveData 前言 使用ViewModel+LiveData LiveData 前言   ViewModel通过将UI data保存在ViewModel类实例的内部,从而大大地将MVC中的 ...

随机推荐

  1. springboot后台控制重定向

    第一种方式: 1. 使用  @Controller  注解而不是  @RestController 2.方法上不要加  @ResponseBody  然后直接返回你要去的页面  比如 return & ...

  2. git与github工具使用

    这篇文章主要的目标是用较少的时间学习Git和GitHub的基本使用.在足够一般使用的前提下,尽量减少命令.如果需要其他命令,到时候再去其他地方了解就行了. 总概:所有命令前都要加 git,如下的ini ...

  3. git上传

    #1.Git 全局设置: git config --global user.name "skbarcode" git config --global user.email &quo ...

  4. textarea跟随内容自动伸缩高度实现方案

    监听input事件,然后将textarea的style.height设置为最低高度(19px),进而获取到元素的scrollHeight,然后将scroolHeight设置为style.height

  5. sudo命令

    su命令 switch user的缩写, 意为切换至指定用户执行命令 常用选项 -c<指令>或--command=<指令>:执行完指定的指令后,即恢复原来的身份: -f或——f ...

  6. Codeforces Round #129 (Div. 1)E. Little Elephant and Strings

    题意:有n个串,询问每个串有多少子串在n个串中出现了至少k次. 题解:sam,每个节点开一个set维护该节点的字符串有哪几个串,启发式合并set,然后在sam上走一遍该串,对于每个可行的串,所有的fa ...

  7. Activiti之流程通过、驳回、会签、转办、中止、挂起等核心操作封装(Activiti5.9)

    http://blog.csdn.net/rosten/article/details/38300267 package com.famousPro.process.service.impl; imp ...

  8. nodejs 从部署到域名访问

    一.Node.js 安装在Ubuntu上 用如下代码下载nodejs 8.x最新版并安装,npm 也会随着一起安装 curl -sL https://deb.nodesource.com/setup_ ...

  9. 调用 js 生成图片二维码

    一.js 生成二维码: 首先,需要引用 jQuery 和 jquery.qrcode.js.然后: //生产二维码 $("#qrcodeCanvas").qrcode({ rend ...

  10. java对象深度拷贝

    如何利用序列化来完成对象的拷贝呢?在内存中通过字节流的拷贝是比较容易实现的.把母对象写入到一个字节流中,再从字节流中将其读出来,这样就可以创建一个新的对象了,并且该新对象与母对象之间并不存在引用共享的 ...