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 EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
javascript不可用的问题探究
Oct 01 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
js闭包实例汇总
Nov 09 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 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
PR值查询 | PageRank 查询
2006/12/20 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python操作qml对象过程详解
2019/09/26 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
加入学生会演讲稿
2014/04/24 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
女儿满月酒致辞
2015/07/29 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
Java Spring读取和存储详细操作
2022/08/05 Java/Android