码迷,mamicode.com
首页 > 其他好文 > 详细

mint-ui vue双向绑定

时间:2017-09-30 15:09:16      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:methods   hold   ice   otto   complete   change   def   ace   项目需求   

由于最近项目需求,用上了mint-ui来重构移动端页面,从框架本身来讲我觉得很强大了,用起来也很不错,但是文档就真的是,,,,让我无言以对,给的api对于我们这些小菜鸟来讲真的是处处是坑呀(ps:用vue的主要目的是方便数据双向绑定,所以并没有配置vue的环境,webpack,node等)

mint-ui Toast

官网文档示例:

1 Toast({
2   message: ‘Upload Complete‘,
3   position: ‘bottom‘,
4   duration: 5000
5 });

实际应用:

1 this.$toast({
2                    message: ‘提示信息‘,
3                    position: ‘middle‘,
4                    duration: 3000
5                });

mint-ui MessageBox

官网文档示例:

1 MessageBox({
2   title: ‘Notice‘,
3   message: ‘Are you sure?‘,
4   showCancelButton: true
5 });

实际应用:

 this.$messagebox.confirm(‘确定执行此操作?‘)
                                .then(action => {
                                    this.cancel = false;
                                })
                                .catch(action => {
                                    this.cancel = true;
                                });

mint-ui Field

mt-field type="date"初始化的时候预置值格式

 1 <template>    
 2 <mt-field label="birthday" placeholder="Input birthday" type="date" v-model="birthday"></mt-field>
 3 </tempalte>
 4 <script>
 5     export default{
 6          data(){
 7         return{
 8                 birthday:2017-06-12
 9             }
10         },
11         methods:{}
12     }
13 </script>        

mint-ui Switch

事件change ,API文档里面写返回一个checked:boolen值,但是直接在change事件里面取出来的checked值却和mt-switch绑定的value相反,所以还是只能监听value的变化

 

mint-ui vue双向绑定

标签:methods   hold   ice   otto   complete   change   def   ace   项目需求   

原文地址:http://www.cnblogs.com/liuhongli/p/7614722.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!