vue设置变量

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>