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

<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. NGUI实现滑动屏幕的时候,进行环形旋转

    在滑动屏幕的时候,上图中的内容饶圆中心旋转,并且箭头的方向保持不变 每个Item上挂载的脚本: using UnityEngine; public class ItemTest : MonoBehav ...

  2. snakemake使用小结

    首先在linux 里配置conda 下载 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-5.3.1-Linu ...

  3. label 的for属性总结

    一.使用介绍 1. 定义:for属性规定label与哪个表单元素绑定. <label>是专门为<input>元素服务的,为其定义标记. label 和表单控件绑定方式有两种: ...

  4. 小程序 新建项目底部tabbar

    在app.json中配置 { "pages": [ "pages/index/index", "pages/staging/staging" ...

  5. Eclipse安装TestNG

    1.在Eclipse中点击Help菜单,选择Install New Software选项,在弹出页面中输入安装地址即可安装. http://beust.com/eclipse 2. 3. 4. 等待T ...

  6. tortoisegit里的cleanup坑

    tortoisegit的clean up功能(以下红框部分)真的不要去点啊,你所有被ignore(忽略)的本地文件会被全部删除,而且是无法恢复的,因为远程仓库里根本就没有这些文件. 血的教训啊,本以为 ...

  7. css3选择器和伪类

    元素选择子: * 任何元素 E 与E标签结合的任何元素 E F E的所有派生标签中,有F标签的元素 E > F 或者 E/F E的所有直接的拥有F标签的子类 E + F 所有具有F标签的元素,紧 ...

  8. LVM (逻辑卷管理器)

    图片来自:https://www.cnblogs.com/linuxprobe/p/5381538.html 参考博客:https://www.cnblogs.com/linuxprobe/p/538 ...

  9. git连接不上远程仓库---visualstudio提交代码报错:no upstream configured for branch 'master'

    1,新建文件夹,在文件下下鼠标右键git bush--->git init,初始化仓库: 2,设置gitthub仓库地址:git remote add origin https://github ...

  10. kendo ui DatePicker 时区转换

    http://blog.darkthread.net/post-2013-06-25-json-date-timezone-issue.aspx