vue-for

<!-- Vue--v-for -->

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style6.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>  
    <div id="vue-app">
    <h1> v-for</h1>
    <h3></h3>
    <p v-for="title in titles">{{ title }}</p>
    <!-- <p v-for="(who,index) in whos">{{ index+1 }}--{{who.name}}--{{who.age}}</p> -->
    <template v-for="(who,index) in whos"><p>{{ index+1 }}--{{who.name}}--{{who.age}}</p></template><!-- 推荐用template包裹,可以避免重复出现 -->

    </div>
    <script src="app8.js"></script>
</body>
</html>
new Vue({
    el:"#vue-app",
    data:{
        titles:["sally","fah","zouzou"],
        whos:[
            {name:"afa",age:12},
            {name:"hk",age:21},
            {name:"sdf",age:23}
        ]
    },
    methods:{
        
    },
    computed:{
    
    }   
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 提问 需求 有一个这样的数组结构 其实我没明白为啥他截图是评论回复的,但代码里写的question?方-_-#需求...
    懒先森阅读 525评论 0 0
  • <!DOCUMENT html> Document {{v}} {{vi}} <.u...
    另一个童话阅读 400评论 0 0
  • 1、我是一个孩子,我只是想有归属感。 当孩子出现不良行为时,我们就在心中默念这句话,我想这可以很大程度上让我们觉察...
    叶子暖洋洋阅读 298评论 0 0
  • 软件测试的对象是软件,软件等于程序加数据加文档,软件工程师是尽可能多的发现软件缺陷,但无法完全消除软件缺陷,非功能...
    霍霍是软件菜鸟阅读 119评论 0 0
  • 今天是2019年1月1日,我家里三个妈一天生。我的妈妈,婆母,三姨,一天过生日,又恰逢元旦,巧合! 祝他们身体...
    赤谷子阅读 450评论 0 1