Vue基础指令2

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>