当前位置：网站首页>14_ Basic list

14_ Basic list

2022-07-26 23:52:00 【ID does not exist.】

Basic list

v-for Instructions ：

​ 1. Used to display list data

​ 2. grammar ：v-for=“(item,index) in xxx” :key=“yyy”

​ 3. Ergodic ： Array 、 object 、 character string 、 Number of times 

<body>
    <div id="root">
        <!--  Traversal array  -->
        <h2> Personnel list （ Traversal array ）</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {
   {p.name}}-{
   {p.age}}
            </li>
        </ul>

        <!--  Traversing objects  -->
        <h2> Car information （ Traversing objects ）</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {
   {k}}-{
   {value}}
            </li>
        </ul>

        <!--  Traversal string  -->
        <h2> Test traversal string （ Use less ）</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {
   {char}}-{
   {index}}
            </li>
        </ul>

        <!--  Traverse the specified number of times  -->
        <h2> Test traversal specified number of times （ Use less ）</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {
   {index}}-{
   {number}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                persons: [{
                        id: '001',
                        name: ' Zhang San ',
                        age: 18
                    },
                    {
                        id: '002',
                        name: ' Li Si ',
                        age: 19
                    },
                    {
                        id: '003',
                        name: ' Wang Wu ',
                        age: 20
                    }
                ],
                car: {
                    name: ' audi A8',
                    price: '70 ten thousand ',
                    color: ' black '
                },
                str: 'hello'
            }
        })
    </script>
原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207180947452692.html

边栏推荐

猜你喜欢

随机推荐