zoukankan      html  css  js  c++  java
  • for列表渲染

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 1.导入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <!-- 2.定义一个 标签 需要给一个标签添加 id -->
    <div id="app">
    <span>{{message}}</span>

    <hr>
    <ul>
    <li v-for="(item,index) in items"> {{index}} ~~~ {{item}} </li>
    </ul>
    <hr>
    <!-- 对对象进行遍历 -->
    <ul>
    <li v-for="(value,key) in object">{{key}} {{value}}</li>
    </ul>
    <hr>
    <ul>
    <li v-for="todo in todos">{{todo.title}} ---- {{todo.author}}</li>
    </ul>
    </div>
    </body>
    <!-- 3.创建vue实例 -->
    <script type="text/javascript">
    var vm = new Vue({
    el:'#app',
    data:{
    message:'hello',
    items:['python','mysql','linux','html','js','css'],
    object: {
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
    },
    todos: [
    {
    title: 'Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
    },
    {
    title: 'python',
    author: 'Ricky',
    publishedAt: '2019-04-10'
    },
    {
    title: 'itcast',
    author: 'itcast',
    publishedAt: '2006-05-08'
    }
    ]
    }
    })
    </script>
    </html>
  • 相关阅读:
    Poj-1088-滑雪
    Poj-2250-Compromise
    CF
    KMP算法
    01背包
    NY 269 VF
    PHP--1+2+3……100=?
    PHP企业发放的奖金--if...elseif...
    2019年中级考试题(附答案)
    PHP的IF条件语句-- 输入一个数字进行判断等级
  • 原文地址:https://www.cnblogs.com/zhang-da/p/14483702.html
Copyright © 2011-2022 走看看