首页 > 其他分享 >vue再读16-系统指令v-for-key

vue再读16-系统指令v-for-key

时间:2023-02-11 14:34:35浏览次数:57  
标签:el vue methods 16 list vm --- key data


<!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可以随意起名 -->
<!--效率会更高 加一个:key -->
<li v-for="(v,i) in data" :key="i">{{v}}------{{i}}</li>
<li v-for="(v,k,i) in list" :key="i">{{v}}---{{k}}---{{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: '未知'
},
data: ['a', 'b', 'c'],

},
methods: {

}
})
</script>
</body>

</html>

vue再读16-系统指令v-for-key_bc

 

标签:el,vue,methods,16,list,vm,---,key,data
From: https://blog.51cto.com/u_15460007/6050418

相关文章

  • vue再读17-系统指令v-bind
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读15-系统指令v-for对象
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • 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/))开发-传统网站开发  ......