业务场景:

element ui里面select的组件,通过勾选是否启动搜索功能

解决:

在select组件上绑定一个 :filterable,值就是是否可搜索的checkbox的值  true和false

    <el-select v-model="value"  :filterable="myOptions.isSearch"  placeholder="请选择">
<el-option
v-for="item in selData"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
    <div class="param-gap">
<label class="left" for="" title="是否可搜索">是否可搜索&nbsp;:</label>
<div class="right">
<input type="checkbox" v-model="params.isSearch" @change="updateData"/>
</div>
</div>

完美解决

vue html属性绑定的更多相关文章

  1. vue添加属性绑定

    html <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的 ...

  2. vue(四)--属性绑定

    v-bind通过v-bind进行属性绑定v-bind:href, 可以简写成 :href <body> <div id="app"> <a v-bin ...

  3. 利用vue v-bind属性绑定bootstrap样式以及输出数据

    自从知道了bootstrap,就被他简介,大气美观的样式吸引,即使在vue框架中,仍旧想使用,下面给出了vue适配版和原版的代码,以飨读者 数据输出部分 export default { data() ...

  4. vue通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style绑定书写             <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...

  5. vue通过属性绑定为元素设置class样式

    第一种方式,直接传递一个数组,注意使用v-bind绑定             <h1 :class="['red','size'">这是一个h1文本</h1&g ...

  6. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  7. 2-4 Vue中的属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue学习之vue属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

随机推荐

  1. GoogleNet-ILSVRC-2014冠军

    Going deeper with convolutions-22层 https://my.oschina.net/u/876354/blog/1637819 那么,GoogLeNet是如何进一步提升 ...

  2. 002-01-RestTemplate-配置使用说明

    一.概述 Spring RestTemplate 是 Spring 提供的用于访问 Rest 服务的客户端,RestTemplate 提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写 ...

  3. 123457123456#0#-----com.threeapp.SuanShuXiaoTianCai01----数学算术小天才

    com.threeapp.SuanShuXiaoTianCai01----数学算术小天才

  4. windows 10 enterprize LTSC

    to avtivate the windows 10 enterprize LTSC version, do the following command every 6 months. slmgr - ...

  5. Java-WebSocket调用报错:WebSocketClient objects are not reuseable

    我的代码 import com.google.common.collect.ImmutableMap; import com.google.common.io.ByteArrayDataOutput; ...

  6. LeetCode_100. Same Tree

    100. Same Tree Easy Given two binary trees, write a function to check if they are the same or not. T ...

  7. (转)华为 安卓手机在MAC系统下 ADB 识别

    使用MACOS发现在Android开发环境完整的情况下,接入小米,SAMSUNG,HTC,ZTE等手机都可以自动识别,如果暂时不能识别,只需要在 adb_usb.ini 中设置之后也可以识别,并可以在 ...

  8. 最新 房天下java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.房天下等10家互联网公司的校招Offer,因为某些自身原因最终选择了房天下.6.7月主要是做系统复习.项目复盘.LeetCo ...

  9. Linux内核编译、安装流程

    原文链接:https://blog.csdn.net/qq_28437139/article/details/83692907 此处只讲linux内核编译步骤至于安装虚拟机,安装ubuntu操作系统请 ...

  10. jQuery禁用input历史选择

    $("#id").attr("autocomplete", "off");