iview学习指南（持续更新）

1.iview框架的modal组件中，只能用v-model，value去控制modal组件的开关。用v-if，v-show无效。

 
<Modal
        v-model="modal1"
        title="普通的Modal对话框标题"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>对话框内容</p>
        <p>对话框内容</p>
        <p>对话框内容</p>
    </Modal>

2.  iview框架的modal组件中，使用v-model与value的区别。v-model，可以双向数据绑定，如下这样写 无论是点击确定，取消，还是X，都可以正常再次打开。

<template>
<Modal
        v-model="modal1"
        title="普通的Modal对话框标题"
     >
        <p>对话框内容</p>
        <p>对话框内容</p>
        <p>对话框内容</p>
    </Modal>
<Button type="primary" @click="modal1 = true">显示对话框</Button>
</template>
<script>
    export default {
        data () {
            return {
                modal1: false
            }
        }
  }
</script>

而使用value时，点击确定，取消，还是X，是无法接受到关闭的时model1变为false，所以model1仍为true，所以无法再次打开，除非自己写on-ok和on-cancel方法，手动将model1改成false。

<template>
 
<Modal
        v-model="modal1"
        title="普通的Modal对话框标题"
        @on-ok="modal1 = false"
        @on-cancel="modal1 = false">
        <p>对话框内容</p>
        <p>对话框内容</p>
        <p>对话框内容</p>
    </Modal>
<Button type="primary" @click="modal1 = true">显示对话框</Button>
</template>
<script>
    export default {
        data () {
            return {
                modal1: false
            }
        }
  }
</script>

3.v-model 里面如果使用computed的值的话，双向数据绑定时效。vue会报错 。但是可以用computed中的get set解决。

computed: {
      getAddress: {
        get: function () {
          if(this.$store.state.updateAddress){
            this.address = this.$store.state.updateAddress
          }
          return this.address
        },
        set: function (value) {
          this.address = value
        },
      },
    }