vue 根据选择条件显示指定参数的例子


Posted in Javascript onNovember 09, 2019

html部分

<el-select style="width: 200px;margin-left:5px;" v-model="queryType" slot="prepend" class="filter-item" @change="changepara">
     <el-option v-for="(item,index) in chooseList"
           :key="index"
           :value="item.value"
           :label="item.label"></el-option>
</el-select>

添加选项,chooseList:[{value:‘1',label:‘1'},{value:‘2',label:‘2'}]可替代为

<el-select style="width: 120px" v-model="queryType" slot="prepend" class="filter-item" @change="changepara">
    <el-option value="1" label="1"></el-option>
    <el-option value="2" label="2"></el-option>
   </el-select>

提供的选择条件比较少的话,可以使用此种方式,看起来比较简洁。

<div class="get_parameter">
 <ul>
  <li v-for="(item,index) in para" :key="index" :value="item" style="width: 200px;float: left;">
   {{item}}
   <div v-show="ifshow[index]">
    <el-input v-model="paramodel[index]" style="width: 180px;"></el-input>
   </div>
   <div v-show="ifshow1[index]" style="width: 200px;">
    <template>
     <el-radio v-model="paramodel[index]" label="0">0</el-radio>
     <el-radio v-model="paramodel[index]" label="1">1</el-radio>
    </template>
   </div>
  </li>
 </ul>
</div>

根据所选条件,显示参数类型,上面的例子是string及bool类型。

以上这篇vue 根据选择条件显示指定参数的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
Javascript中的async awai的用法
May 17 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Mac下安装vue
Apr 11 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
You might like
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
Javascript继承机制详解
2017/05/30 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
详解Python中类的定义与使用
2017/04/11 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python对切片命名的实现方法
2018/10/16 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python必须了解的35个关键词
2020/07/16 Python
深入浅析Python代码规范性检测
2020/07/31 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
教师网络培训感言
2014/03/09 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
倡议书怎么写?
2019/04/11 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server