vue下的mint-ui框架，popup组件怎么加载数据？

Question

第一次使用mint-ui，当我现在能出现popup的模糊背景效果，但是数据加载出来直接都是代码，官网文档实在是简略。这里是官网文档

Answer 1

v-for 循环 slots 的每一条信息，
例如:

<template>

  <div id="first">

    <p>我是第一个{{msg}}</p>

    <mt-button @click.native="handleClick">按钮</mt-button>

    <mt-popup v-model="popupVisible" position="bottom">

        <div v-for="it in slots">

            <span v-text="it.flex"></span>

        </div>

    </mt-popup>

  </div>

</template>

<script>

export default {

  data () {

    return {

      msg:'组件',

      popupVisible:false,

      slots: [

        {

          flex: 1,

          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

          className: 'slot1',

          textAlign: 'right'

        }, {

          divider: true,

          content: '-',

          className: 'slot2'

        }, {

          flex: 1,

          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

          className: 'slot3',

          textAlign: 'left'

        }

      ]

    }

  },

  methods: {

    handleClick: function() {

        this.popupVisible = true

        }

    }

}

</script>

<style>

</style>

这样就能循环出每一条数据了，加点样式美化一下，你就能得到你想要的。

官网文档给的是一个空白页，意思是里面的东西随你自己填，只要放到组件里面，就能通过相关的触发事件去调出这个popup框。