1.for循環
<body>
<div id="app">
<p>{{list1[0]}}</p>
<hr />
<!--遍歷數組-->
<p v-for="(item,index) in list1">第{{index}}項:{{item}}</p>
<!--遍歷數組中的對象-->
<p v-for="user in list2">id:{{user.id}}--name{{user.name}}</p>
<!--遍歷對象-->
<p v-for="(val,key) in user">{{val}}--{{key}}</p>
<!--v-for迭代數字 初始值:1-->
<p v-for="count in 10">{{count}}</p> id:<input type="text" v-model="id"/> name:<input type="text" v-model="name"/>
<input type="button" value="添加" @click="add"/>
<p v-for="item in list2" :key="item.id">
<input type="checkbox" /> {{item.id}}--{{item.name}} </p>
</div>
<script>
var vm = new Vue({ el: "#app", data: { id:'', name:'', list1:[1,2,3,4,5,6,7,8,9], list2:[ {id:1,name:'zs1'}, {id:2,name:'zs2'}, {id:3,name:'zs3'}, {id:4,name:'zs4'}, ], user:{ id:1, name:'托尼斯塔克', gender:'男', } }, methods: { add(){ this.list2.unshift({id:this.id,name:this.name}) } } }) </script>
</body>
2.v-if和v-show
<body>
<div id="app">
<input type="button" value="切換" @click="flag=!flag" />
<!--移除元素和添加元素 -->
<h3 v-if="flag">這是v-if</h3>
<!--設置display:none的屬性-->
<h3 v-show="flag">這是v-show</h3>
</div>
<script>
var vm = new Vue({ el: '#app', data: { flag: true, }, methods: { } }) </script>
</body>
