首页 > 其他分享 >vue再读15-系统指令v-for对象

vue再读15-系统指令v-for对象

时间:2023-02-11 14:34:10浏览次数:94  
标签:el vue 15 methods list vm --- geyao 再读


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<!-- 数据渲染界面 -->
<div id="abc">
<!-- 列表渲染 -->
<ul>
<!-- item和index可以随意起名 -->
<li v-for="(value,key,i) in list">{{value}}----{{key}}---{{i}}</li>

</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
//v-on里面的methods方法
el: '#abc',
//模板ajax返回的数据
data: {
msg: '我是歌谣',
list: {
id: 1,
name: 'geyao',
age: '38',
size: 30,
gender: '未知'
}

},
methods: {

}
})
</script>
</body>

</html>

vue再读15-系统指令v-for对象_html

 

标签:el,vue,15,methods,list,vm,---,geyao,再读
From: https://blog.51cto.com/u_15460007/6050420

相关文章

  • vue再读13-系统指令v-on
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读10-差值表达式
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读11-指令解释
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Documen......
  • vue再读9-实例选项method
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读14-系统指令v-for
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读8-实例选项data
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读6-vue的helloworld
    ####2.2HelloWorld>作用:将数据应用在html页面中1.body中,设置Vue管理的视图<divid="app"></div>2.引入vue.js3.实例化Vue对象newVue();4.设置......
  • vue再读3-vue能做什么
    ####1.3Vue能做什么-最大程度上解放了DOM操作-单页web项目(SinglePageApplication项目,例如[Worktile官网](https://worktile.com/))开发-传统网站开发  ......
  • vue再读7-实例选项el
      ......
  • vue再读37-过滤器的使用日期格式
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......