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

Question

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

Answer 1

v-for 循环 slots 的每一条信息，例如:<template>&nbsp; <div id="first">&nbsp; &nbsp; <p>我是第一个{{msg}}</p>&nbsp; &nbsp; <mt-button @click.native="handleClick">按钮</mt-button>&nbsp; &nbsp; <mt-popup v-model="popupVisible" position="bottom">&nbsp; &nbsp; &nbsp; &nbsp; <div v-for="it in slots">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span v-text="it.flex"></span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </mt-popup>&nbsp; </div></template><script>export default {&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; msg:'组件',&nbsp; &nbsp; &nbsp; popupVisible:false,&nbsp; &nbsp; &nbsp; slots: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className: 'slot1',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textAlign: 'right'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; divider: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '-',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className: 'slot2'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className: 'slot3',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textAlign: 'left'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; handleClick: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.popupVisible = true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}</script><style></style>这样就能循环出每一条数据了，加点样式美化一下，你就能得到你想要的。官网文档给的是一个空白页，意思是里面的东西随你自己填，只要放到组件里面，就能通过相关的触发事件去调出这个popup框。