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

<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. 删除链表的倒数第N个节点(java实现)

    题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链 ...

  2. Project Euler 345: Matrix Sum

    题目 思路: 将问题转化成最小费用流 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #incl ...

  3. stm32WB55xx 外设资源

    1.FLASH(闪存) 2.Radio System(无线系统:兼容BLE5.0与IEEE802.15.4标准,由2.4GHz射频前端.BLE和IEEE802.15.4物理层控制器组成,无线低功耗协议 ...

  4. Activity的介绍

    Activity类是Android应用程序的重要组成部分,activity的启动和组合方式是平台应用程序模型的基本组成部分.Android系统通过调用与其生命周期的特定阶段相对应的特定回调方法来启动A ...

  5. Confluence 6 升级中的一些常见问题

    升级的时候遇到了问题了吗? 如果你想尝试重新进行升级的话,你需要首先重新恢复老的备份.不要尝试再次对 Confluence 进行升级或者在升级失败后重新启动老的 Confluence.  在升级过程中 ...

  6. SQLyog 连接主机的时候出现错误

    这个 连接主机的时候出现: 这个时候打开cmd 找到mysql 的bin目录 输入 mysqld  -nt -remove  即可   直接登录,注意这里的d代表的是服务端 接下来就可以不用输入密码直 ...

  7. OneNote无法打开链接出现错误:你的组织策略阻止我们为你完成此操作

    首先打开注册表编辑器,按键盘win+r,调出运行窗口,输入regedit打开注册表编辑器 打开HKEY_CURRENT_USER\Software 打开\Classes 最后选中.html,在默认选项 ...

  8. 解决MySQL数据库连接太多,多数Sleep

    1.查看当前所有连接的详细资料: mysqladmin -uroot -proot processlist 客户端使用: show full processlist 2.只查看当前连接数(Thread ...

  9. chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同

    chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同 chrome 获得的是不含路径的纯文件名 IE获得的是含路径的文件名

  10. Haxe东游记(上)part1.5:roadmap

    part1.6 = 常用API参考 1.5.7 -> 官方手册目录/总结/中文化 1.8 -> 官方示例/讲解/总结 1.5.6-> haxe整体结构/解析/综述 part2 = 中 ...