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

<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. 【转载】Java性能优化之JVM GC(垃圾回收机制)

    文章来源:https://zhuanlan.zhihu.com/p/25539690 Java的性能优化,整理出一篇文章,供以后温故知新. JVM GC(垃圾回收机制) 在学习Java GC 之前,我 ...

  2. Vue.js错误: Maximum call stack size exceeded

    这几天正自学Vue, 用eggjs + vue 采用前后分离,写一个网站练练手. 增加了一个商品详情页 Detail.vue的时候,点击进入Detail.vue的时候,页面显示空白,打开浏览器调试工具 ...

  3. python 两个 list 获取交集,并集,差集的函数

    1. 获取两个 list 的交集 a = [1, 2, 3, 4] b = [1, 2, 5] print(list(set(a).intersection(set(b)))) 2. 获取两个 lis ...

  4. Linux上文件恢复工具

    文件恢复工具extundelete官网:http://extundelete.sourceforge.net/ 使用方法,在页面里找到download,下载源码安装包:extundelete-0.2. ...

  5. postman-SSL证书问题-支持HTTPS请求

    使用Google接口调试插件postman请求https协议的接口,postman提示: 为此,需要解决这个问题,提示信息已经给出了解决方案!Using self-signed SSL certifi ...

  6. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  7. Yarn架构详解

    Yarn架构介绍Yarn/MRv2最基本的想法是将原JobTracker主要的资源管理和job调度/监视功能分开作为两个单独的守护进程.有一个全局的ResourceManager(RM)和每个Appl ...

  8. 微信中扫描二维码自动打开手机系统默认浏览器下载APP(APK)

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 功能目的 生成微信跳转链接,实现微信内置浏览 ...

  9. android项目导入eclipse变成java项目——修改.project文件——亲测有效

    解决办法:http://www.cnblogs.com/yunfang/p/6068599.html

  10. python turtle库的几个小demo

    一.先上图 一个同切圆和五角星 上代码 import turtle #同切圆 turtle.pensize(2) turtle.circle(10) turtle.circle(40) turtle. ...