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

<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. 2018-2019-2 20165303《网络攻防技术》Exp5 MSF基础应用

    实践目标 1.一个主动攻击实践 ms17_010(成功) ms08_067(成功) 2.一个针对浏览器的攻击 ms13-008(成功唯一) ms11-050(失败) ms13-069(成功唯一) ad ...

  2. 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 ...

  3. 【Java】【11】String数组和List相互转换

    正文: 1,String[]转List String[] strs = {"aa", "bb", "cc"}; //String数组 //方 ...

  4. Mac OS X 操作系统下JDK安装与环境变量配置

    1. 下载JDK. 去oracle官网的Java SE Downloads页面(如图 1),下载Mac os版本JDK(如图 2): 图 1 图 2   2. 安装JDK. 下载完成后,双击.dmg文 ...

  5. CQRS粗浅理解

    CQRS(命令查询责任分离)是一种奇特的模式,表示解耦系统的输入和输出. 通常情况下,输入端将数据写到数据库,输出端从数据库查询.与读写锁的场景类似,写的过程中不能读.正常情况下没有问题,但是在大规模 ...

  6. ldap 导出、导入ldif数据

    ldap 导出.导入ldif数据有如下方式: 1.dsadm(速度快,需要停止ldap实例) 2.dsconf(速度慢,需要保持ldap实例开启) windows导出.导入需要加上参数--unsecu ...

  7. eclipese的一些卡顿问题

    一,在jsp页面上输入拼音的时候很卡顿怎么办? 二,我们在复制粘贴等用到ctry的时候会很卡顿,尤其是在jsp页面.干掉以下就好了.

  8. ES6 memo

    一.热门问题 介绍redux,主要解决什么问题 是管理应用程序状态的库,解决数据管理和数据通信的问题 Promise.Async有什么区别 Async 更简洁,不需要用 then 连接 Promise ...

  9. Kali Linux搭建Go语言环境

     准备: (1)Kali Linux系统(此实验为VMware环境) (2)Go语言安装包 具体过程: (1)到官网下载Go语言安装包,如图示操作(官网可能需要梯子,没有的可以从国内相关网站下载) ( ...

  10. 总结AWS使用要点

    最近做毕业设计,要用AWS跑代码,以前只用过一次,这次踩了很多坑,记录一下.. AWS命令行管理S3 bucket AWS官方文档: http://docs.amazonaws.cn/cli/late ...