Vue02---vue样式绑定、条件渲染、列表渲染

目录

1、样式绑定

2、条件渲染 v-if；v-else

3、列表渲染 v-for

4、set方法（两种方式）

---

1、样式绑定

第一种方式：class的对象绑定

在标签上写 :class="{样式名字className: isActivated是否显示的值}"

第二种方式：class的数组绑定

:class="[vue的数据名字]"

通过在vue实例的data中设置该数据的值来进行样式的赋值

第三种方式 ： style行内样式修改

:style="vue的数据属性名字styleObj"

或者 :style="[styleObj,{fontSize:'20px'}]"

后续在vue的date属性里定义（如下）,然后在methods方法里定义修改方法

data:{
    styleObj:{
        color:"black"
    }
}

2、条件渲染 v-if；v-else

根据v-if的表达式的返回值来确定内容是否被挂载到页面上

if else不能分隔开使用

v-show 相当于display:none 性能更高

3、列表渲染 v-for

语法：v-for="(itme,index) of list"

最好在标签上加一个key值，以提循环的高性能:key 唯一且不要使用index

七个数组操作方法.直接通过下标操作不可改变

pop、push、shift、unshift

splice 截取数组 （开始位置，删除长度，加入数据）

sort、reverse

渲染对象

v-for="(itme,key,index) of list"

对象可以通过key名直接修改数据内容，但添加数据的时候不可直接添加，可以通过修改引用的方式

4、set方法（两种方式）

操作对象方法

Vue.set(数据名，数据内容) vue全局方法

vm.$set() 实例方法

操作数组

Vue.set(数据名，数组下标，修改内容)

vm.$set() //同上