目录
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() //同上