1 <!DOCTYPE <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Page Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 9 <script src="main.js"></script> --> 10 <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script> 11 12 </head> 13 <body> 14 15 <ul id="example-2"> 16 <li v-for="(item, index) in items" > 17 <a v-if="seen">v-if /.</a> {{ parentMessage }} - {{ index }} - {{ item.message }} 18 <a v-show="ken">.v-show /.</a> 19 <p v-if="ok">ok</p> 20 <p v-else="ok">no</p> 21 </li> 22 </ul> 23 24 <ul id="v-for-object" class="demo"> 25 <div v-for="(value, key, index) in object" > 26 {{ index }}. {{ key }}: {{ value }} 27 </li> 28 </ul> 29 <ul id ="app3"> 30 <li v-for="n in evenNumbers">{{ n }}</li> 31 <div> 32 <span v-for="n in 10">{{ n }} </span> 33 </div> 34 </ul> 35 36 37 </body> 38 39 <script> 40 41 42 43 new Vue({ 44 el: '#app3', 45 data: { 46 numbers: [ 1, 2, 3, 4, 5 ] 47 }, 48 computed: { 49 evenNumbers: function () { 50 return this.numbers.filter(function (number) { 51 return number % 2 === 0 52 }) 53 } 54 } 55 }) 56 57 new Vue({ 58 el: '#v-for-object', 59 data: { 60 object: { 61 firstName: 'John', 62 lastName: 'Doe', 63 age: 30 64 } 65 } 66 }) 67 68 app1= new Vue({ 69 el: '#example-2', 70 data: { 71 parentMessage: 'Parent', 72 seen:true, 73 ken:false, //style="display: none;" 74 ok:true, 75 items: [ 76 { message: 'Foo' }, 77 { message: 'Bar' }, 78 { message: 'Paa' }, 79 { message: 'qcc' } 80 ] 81 } 82 }) 83 84 </script> 85 </html>