vue.js_04_vue.js的for循环，if判断和show显示

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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> 
<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>

<h3 v-show="flag">这是v-show</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
},
methods: {
}
})
</script>
</body>