vue-数据遍历-IF判断
1、在js代码中的data节点中,定义一个数据<script>export default {name: 'HelloWorld',show_div: true,data () {return {title: 'test title'list: [{id: 1,name: 'likang'}, {id: 2,nam
·
1、在js代码中的data节点中,定义一个数据
<script>
export default {
name: 'HelloWorld',
show_div: true,
data () {
return {
title: 'test title',
list: [
{
id: 1,
name: 'likang'
}, {
id: 2,
name: 'likang2'
}
]
}
},
methods: {
showdiv: function () {
this.show_div = !this.show_div;
}
}
}
</script>
2、HTML页面
<h1>{{title}}</h1>
<ul>
<li v-for="(v,k) in list" v-bind:class="red" v-bind:key="k">
<span> {{v.name}}</span>
</li>
</ul>
<div v-if="show_div">
{{show_div}}
</div>
<button @click="showdiv()">显示/隐藏</button>
3、代码解析
<h1>{{title}}</h1>
{{}}中放置变量,title代表在data中定义的变量。
<ul>
<li v-for="(v,k) in list" v-bind:class="red" v-bind:key="k">
<span> {{v.name}}</span>
</li>
</ul>
其中 v-for代表是遍历的意思, (v,k)其中v代表便利出来的数据,k代表数组的下标,v-bind代表给标签绑定属性。 v-bind:key=k 代表遍历对象的key
<div v-if="show_div">
{{show_div}}
</div>
<button @click="showdiv()">显示/隐藏</button>
其中 v-if代表判断,判断在data中定义的show_div是否为真,如果为真,表示改元素显示,否则不显示
button按钮中 @click表示给button添加点击事件,调用showdiv方法,会自动调用到在method中定义的方法。
绑定点击事件也可以使用v-on:click绑定。@click为简写方式。
其他相关的事件
click 点击
dbclick 双击
keydown 键盘按下
keyup 键盘抬起
mouseover 鼠标放上去
mouseout。鼠标移开
this.show_div = !this.show_div;
表示给data中的 show_div赋值,如果show_div为true则改为false,如果为false修改为true,这样就可以控制元素的现实和隐藏了。
隔行变色
<table style="width: 90%;" border="1" cellpadding="0" cellspacing="0">
<tr v-for="(v,k) in user_list" :class="{blue:k%2==0}">
<td>{{v.user_id}}</td>
<td>{{v.user_name}}</td>
<td>
<span v-if="v.sex == 1">男</span>
<span v-else-if="v.sex == 2">女</span>
<span v-else>保密</span>
</td>
</tr>
</table>
```
更多推荐
已为社区贡献6条内容
所有评论(0)