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

<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. c#异步学习笔记

    如下代码.只需要异步的处理一个数据,不需要等处理完成后,进行后继的操作.可以不用Async来修饰方法 static void Main(string[] args) { Test(); Console ...

  2. [转]C# winform与Javascript的相互调用

    C# winform与Javascript的相互调用 <html> <head> <meta http-equiv="Content-Language" ...

  3. Asp.Net Boilerplate Project 使用swagger调试api

    文件有点大,去掉了packages文件夹,(Swashbuckle.Core.5.6.0) 链接:https://pan.baidu.com/s/1DzMLhFyRav0dufS4dTeMzg 提取码 ...

  4. git add * 提示warning: LF will be replaced by CRLF in 解决办法

    在使用git的时候,每次执行 $ git add * 都会提示这样一个警告消息: 虽然说没有什么影响吧. 不过就是觉得太碍眼了, 按照这样设置就没有问题了: git config core.autoc ...

  5. Python的类的下划线命名的区别

    首先,单下划线开头,这个常被用于模块中,在一个模块中以单下划线开头的变量和函数被默认当做内部函数,如果使用from  module  import  *导入时,这部分变量和函数不会被导入.注意,如果使 ...

  6. Arthur and Questions CodeForces - 518E (贪心模拟)

    大意: 给定序列$a$, 某些位置为'?', 求给'?'赋值使得序列$(a_1+a_2+...+a_k,a_2+a_3+...+a_{k+1},...)严格递增, 且$\sum|a_i|$最小. 化简 ...

  7. Petrozavodsk Winter Camp, Day 8, 2014, Fine Brochures

    1的个数-块的个数+多减的个数+flag 多减的只会在一个循环末尾出现 #include <bits/stdc++.h> using namespace std; #define rep( ...

  8. 1、java的数据类型

    一.基本数据类型 1.整型(byte,short,int,long) byte在内存中占用一个字节,short占用两个字节,int占用四个字节,long占用8个字节: Java语言中整型默认为int型 ...

  9. SpringBoot项目中禁用HttpClient那些嘈杂的日志

    在SpringBoot中使用了HttpClient之后,会产生大量嘈杂且基本无效的日志信息,如下图: 找了很多文章,大部分用common-logging.propertites,log4j.prope ...

  10. c++中各类型数据所占字节数(一)

    转自: https://blog.csdn.net/hi_baymax/article/details/82415896 和机器字长及编译器有关系: 所以,int,long int,short int ...