class绑定:
可以给class绑定一个对象 对象中是需求的样式:
或者用一个数组绑定多个样式
对象可以绑定多个样式并决定显示影藏
<div :class="{heiye:n,mainbox:true}">231123</div><!--{}中的样式可以设置false true 开关样式
<div :class="mode">566656</div>
<div :class="['mainbox',mode]"><!--两个样式的写法 mainbox固定 mode是data中固定-->
显示隐藏:
使用:style属性直接绑定行内样式
:style="display:none"
style的样式绑定 什么时候用:当页面中有某些样式的改变时
v-if与v-show
v-if 决定元素显示还是影藏 切换功能
v-show和if功能用法一样
v-if直接移除元素 可释放内存 用在不常切换的模块
v-show 用css影藏元素(display:none) 内存消耗更高 适用于经常切换业务
v-for
在一个div中加上v-for属性 他的所有子元素都会循环渲染
渲染次数取决去v-for="el in arr" arr中有多少个el
v-for也可以写成 v-for="(el,index) in arr" index为自动分陪的下标 可以在div内当做参数或渲染到页面
<div v-for="el in arr3">
<h1>{{ el.name }}</h1>
<div v-for="el2 in el.title">
{{el2}}
</div>
</div>
v-if v-for 写到一起时 v-for 优先级更高
如果v-for取的el in 那么v-if就会取v-for的el
<div v-for="el2 in el.title" v-if="el.age>'50'"><!-v-if="el.age el.age为true才显示-->
{{el2}}
</div>
解决方案:1.写成嵌套关系 2.冰元素template
<template>
<div v-if="el.age>50">
<div v-for="el in el.title">
{{el}}
</div>
</div>
</template>
对于增删改业务 v-for 有复选框等情况
可以给v-for加上一个key值
<div v-for="el in arr" :key="el.id">
<input type="checkbox" name="goods" :value="el.id">
<b>{{el.title}}</b>
</div>
<button @click="addmore">加载</button>