1. 程式人生 > >vue v-if with v-for

vue v-if with v-for

images data sage class img rip mage clas .cn

遍歷和條件判斷混合使用示例。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    <div v-for="message in messageList" v-if
="message.test == ‘vue.js‘"> {{message.test}} </div> <br>------------完美的分隔線--------------</br> <div v-for="message in messageList"> <span v-if="message.test == ‘vue.js‘">{{message.test}}是一種很好用的前臺框架</span> {{message.test}} </
div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ messageList: [ {test:java}, {test:vue.js}, {test:liunx} ] } }) </script> </html>

輸出結果:

技術分享

vue v-if with v-for