vue+elementUI之input实战

最近的项目大量的使用了elementUI+vue这种模式。所以写下一些心得，希望能帮助到看到这篇文章的可爱的你。

此文章默认你已经有vue搭建并会使用的基础。木有的话，请先看看vue吧
vue官方文档指路链接（点击）
elementUI官方文档指路链接（点击）

好，废话不多说，让我们开始讲闲话！额，是讲正文。。。。

涉及功能点

• input的禁止输入联动
• select功能的使用
• vue-watch的使用
• v-for的使用
• vue数据的双向绑定

项目上的应用场景

1、点击按钮后禁止输入

效果图


代码

2、根据值的变化，禁止输入

比如选择某个select的值的时候，禁止某项input输入。多应用于表单输入的联动。

效果图

2.gif

注意

1、在监听的时候一定要深度监听deep: true
2、为了能更好的遍历数据，我使optionsect的value值和disabled的key名保持一致。

（实际项目中最好将value和key的名字起的都有意义并且操作方便一些比较好）

代码
为了方便观看贴的局部

//html
 

      
        
        
      
        
        
        
    

//js

好了，暂时写到这里
此文不定期更新，有其它input用法想了解的可以留言哟~