四、v-for列表渲染

最新推荐文章于 2024-09-28 15:43:20 发布

前端之家

最新推荐文章于 2024-09-28 15:43:20 发布

阅读量397

点赞数

分类专栏： VUEJS技术

本文链接：https://blog.csdn.net/qq_41761746/article/details/80240632

版权

VUEJS技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1，使用的V-for指令

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

新建a.vue VUE

<template>
<div>
{{ hello }}
</div>
</template>
<script>
export default{
	data(){
		return{
			hello:"我是v-for循环的组件"
		}
	}
}
</script>

APP.vue

<template>
  <div>
  <componentA v-for="(value,key) in objList" key='key'></componentA>
  <ul>
    <li v-for="(item , index) in list"  :class="{odd : index%2}">//判断index角标添加class样式
     <span> {{ item.name}}</span>
     <em> {{ item.age}}</em>
     <p>{{index}}</p> //显示角标数
    </li>
    <li v-for="item in list" v-text = "item.name + '-' + item.age">
    </li>
    <li v-for="(value,key) in objList">
      {{value}}--{{key}}
    </li>
    </ul>
  </div>
</template>

<script>
import componentA from './components/a' //引入组件文件

export default{
//循环引入组件
components:{
  componentA:componentA
},//注册组件


data (){
    return{
//循环一个数组
    list:[
    {
      name:"我是数组循环数据",
      age:"我是第一个数据"
    },
    {
      name:"我第二条数据",
      age:"我是第二个数据"
    }
    ],
    props:['logo'],
//循环一个对象
objList:{
  name:'我是对象循环的对象',
  age:'我是循环对象的第二个数据',
  color:'red'
}
    }
  }
}
  
</script>

//引入vue框架
import Vue from 'vue'
import App from './App'

new Vue({
	el:'#app',
	render: function (){
		return h(App)
	}
})

前端之家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录