1.单个元素
<template> <div>{{word}}</div> </template> <script> export default{ data () { return{ word:'显示的文字', } } } </script>
2.图片
<template> <div><img :src="picture" ></div> </template> <script> export default{ data () { return{ picture: require("@/views/img/zhichou-banner.jpg"), } } } </script>
3.循环组件里的多个元素(注意:v-for不能放在根元素)
<template> <div> <div class="component" v-for="(user, i) in datalist"> <div>{{user.word1}}</div> <div>{{user.word2}}</div> </div> </div> </template> <script> export default{ data () { return{ datalist:[ { word1: '组件中的元素1', word2: '组件中的元素2'}, { word1: '组件中的元素1', word2: '组件中的元素2'}, ], } } } </script>