【Vue】vue中template的作用及使用

本文轉載自查看原文 2021-02-15 10:18 579 Vue.js

先來看一個需求：下圖div用v-for做了列表循環，現在想要span也一起循環，應該怎么做？

有3種方法可以實現

　 ①：直接用v-for對span也循環一次（該方法雖然可以使用，但不要用這種方式，因為以后你會哭）

　 ②：在div和span外面包裹一個div，給這個div加循環（該方法會額外增加一個多余的div標簽）

③：若你不想額外增加一個div，此時應該使用template來實現（推薦）

template的作用是模板占位符，可幫助我們包裹元素，但在循環過程當中，template不會被渲染到頁面上

DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <template v-for="(item, index) in list" :key="item.id">
                <div>{{item.text}}--{{index}}</div>
                <span>{{item.text}}</span>
            </template>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    list: [
                        {
                            id: "010120",
                            text: "How"
                        },
                        {
                            id: "010121",
                            text: "are"
                        },
                        {
                            id: "010122",
                            text: "you"
                        }
                    ]
                }
            })
        </script>
    </body>
</html>

轉自：https://www.cnblogs.com/tu-0718/p/11177236.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中template的作用及使用 vue中template的作用及使用 vue中template的作用及使用 vue-template-compiler作用 Vue中的template標簽的使用和在template標簽上使用v-for Vue中的template標簽的使用和在template標簽上使用v-for vue 中 uuid 的使用以及作用 vue 中的 key 有什么作用？ Vue中key的作用 Proxy在Vue中的作用