vue select组件的使用与禁用实现代码_vue.js

来源:脚本之家  责任编辑:小易  

参考如下:下载最新的vuenpm install vuejs 引用 vue.js开始代码,感受vue强大的双向数据绑定{{ message }}new Vue({el:'#app',data:{message:'Hello Vue.js!'}})实战代码:{{ todo.text }}($index)">Xnew Vue({el:'#app',data:{newTodo:'',todos:{ text:'Add some todos' }},methods:{addTodo:function(){var text=this.newTodo.trim()if(text){this.todos.push({ text:text })this.newTodo=''}},removeTodo:function(index){this.todos.splice(index,1)}}})www.zgxue.com防采集请勿采集本网。

业务:消息推送方式有两种,为“微信”和“邮件”,微信发送时需要选择“要发送的应用程序”,邮件发送时不需要

cityList 111 app> script> 返回的是一个组件,必须注册才能使用 new Vue({ el:'body', components:{ app:App } });

微信发送时,页面如下:

使用vue.js构造modal组件的方法是使用 v-model 指令: v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。比如,多个勾选框,绑定到同一个数组:

页面

邮件发送时,选择器不可用,页面如下:

定义一个组件/title.vue {{title.title}} export default { props:{ title:{ title:'' } } 在另一个组件里用/index.vue import navTitle form 'title.vue' export default { el:'#app',data:{

邮件页面

虽然官网上没有给出具体的例子,但可从属性中查到 “disabled”属性,

vue组件的数据传递应该是单向,永远是向下的,把父组件属性方法传递到子组件。如果子组件要改变不同的颜色,是应该接受父组件传递进来的props,自己调用自己的方法,把props当个参数来判断来显示

属性 说明 类型 默认值
disabled 是否禁用 Boolean false

定义一个组件 title.vue {{title.title}} export default { props:{ title:{ title:'' } }

实现:

  添加disabled属性,写成如下红色标记格式;定义一个isAble变量,用来存放TRUE和FALSE值,决定此选择框是否可用。

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> </Select> export default { data(){ return{ isAble: false,//select下拉框是否可用 } }

然后就是逻辑中操作变量isAble的值,改变组件的可用禁用状态了

methods:{ Test(){ var vm = this; if (vm.alertType == '邮件') { vm.isAble = true; //不可用 } } }

test方法中只写了判断不可用,改回微信时,还要变成可用状态,不然又埋了个bug,哈哈。不过这是业务逻辑了,只介绍方法,记个笔记,具体视情况而定。

总结

以上所述是小编给大家介绍vue select组件的使用与禁用实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

{{selected.text}} t1 t2 拿到一个键值对的序列比如date={v1:t1,v2:t2},然后绑定select 获得到value 只要data[select]就行啦内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue.js 2.0中select级联下拉框实例
  • 浅谈vue element中select下拉框选取值的问题
  • vue.js select下拉框绑定和取值方法
  • vue select二级联动第二级默认选中第一个option值的实例
  • vue select选择框数据变化监听方法
  • vue 自定义 select内置组件
  • vue2组件之select2调用的示例代码
  • 使用vue自定义指令实现select组件
  • 详解vue 动态添加模板的几种方法
  • vue动态控制input的disabled属性的方法
  • vue动态生成dom并且自动绑定事件
  • vue中动态select的使用方法示例
  • vuejs 取得 url 参数值的方法
  • vue中的过滤器实例代码详解
  • element-ui table span-method(行合并)的实现代码
  • vue 使用props属性实现父子组件的动态传值详解
  • vue父组件中获取子组件中的数据(实例讲解)
  • vue-router:嵌套路由的使用方法
  • vue服务端渲染的实例代码
  • vue2.0 父组件给子组件传递数据的方法
  • vue实现可增删查改的成绩单
  • vue2项目使用sass的示例代码
  • 饿了吗 vue组件select 获取当前的lable
  • 如何正确使用Vue.js的组件
  • 如何正确使用Vue.js的组件
  • 如何正确使用Vue.js的组件
  • 如何正确使用Vue.js的组件
  • 如何正确使用Vue.js的组件
  • 如何正确使用Vue.js的组件
  • vue 怎么调用其他组件的方法
  • 如何正确使用Vue.js的组件
  • 如何正确使用Vue.js的组件
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.js 2.0中select级联下拉框实例浅谈vue element中select下拉框选取值的问题vue.js select下拉框绑定和取值方法vue select二级联动第二级默认选中第一个option值的实例vue select选择框数据变化监听方法vue 自定义 select内置组件vue2组件之select2调用的示例代码使用vue自定义指令实现select组件详解vue 动态添加模板的几种方法vue动态控制input的disabled属性的方法vue动态生成dom并且自动绑定事件vue中动态select的使用方法示例vuejs 取得 url 参数值的方法vue中的过滤器实例代码详解element-ui table span-method(行合并)的实现代码vue 使用props属性实现父子组件的动态传值详解vue父组件中获取子组件中的数据(实例讲解)vue-router:嵌套路由的使用方法vue服务端渲染的实例代码vue2.0 父组件给子组件传递数据的方法vue实现可增删查改的成绩单vue2项目使用sass的示例代码vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue之组件内监控$store中定义变量的变化详详解如何搭建mpvue框架搭配vant组件库的小vue2 监听属性改变watch的实例代码深入理解vuex2.0 之 modules结合mint-ui移动端下拉加载实践方法总结vue 点击按钮实现动态挂载子组件的方法详解vue的状态控制与延时加载刷新vue+echarts实现可拖动节点的折线图(支持vue.js轮播图组件使用方法详解vue2单一事件管理组件通信
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved