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

 更新时间:2019年11月09日 09:58:31   作者:LuckyMon  
今天小编就为大家分享一篇vue 根据选择条件显示指定参数的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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 根据选择条件显示指定参数的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+ts+vant移动端H5项目搭建的实现步骤

    vue3+ts+vant移动端H5项目搭建的实现步骤

    本文主要介绍了vue3+ts+vant移动端H5项目搭建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • ArcGis API for js在vue.js中的使用示例详解

    ArcGis API for js在vue.js中的使用示例详解

    这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue上传文件formData上传的解决全流程

    vue上传文件formData上传的解决全流程

    这篇文章主要介绍了vue上传文件formData上传的解决全流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue中$set用法详解

    vue中$set用法详解

    在vue中,并不是任何时候数据都是双向绑定的,解决数据没有被双向绑定我们可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名,这篇文章主要介绍了vue中$set用法详细讲解,需要的朋友可以参考下
    2022-12-12
  • 使用Vue-cli 中为单独页面设置背景图片铺满全屏

    使用Vue-cli 中为单独页面设置背景图片铺满全屏

    这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue3实现自定义指令拦截点击事件的示例代码

    Vue3实现自定义指令拦截点击事件的示例代码

    某些应用场景会给点击事件添加权限,不存在权限就拦截点击事件,有权限就继续正常触发点击事件。这样的效果是如何实现的呢,本文就来和大家详细讲讲
    2023-02-02
  • vue实现一个单文件组件的完整过程记录

    vue实现一个单文件组件的完整过程记录

    整个项目结构清晰,尤其单文件组件的表现力尤为突出,使得每个组件的逻辑都没有过于复杂,所以这篇文章主要给大家介绍了关于vue实现一个单文件组件的相关资料,需要的朋友可以参考下
    2021-06-06
  • 详解Vue SPA项目优化小记

    详解Vue SPA项目优化小记

    这篇文章主要介绍了详解Vue SPA项目优化小记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vuejs+element UI table表格中实现禁用部分复选框的方法

    vuejs+element UI table表格中实现禁用部分复选框的方法

    今天小编就为大家分享一篇vuejs+element UI table表格中实现禁用部分复选框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求,目前支持上下左右无缝滚动,单步滚动,及支持水平方向的手动切换功能,本节介绍,vue添加 vue-seamless-scroll实现自动无缝滚动的效果,并对应添加点击事件
    2023-01-01

最新评论