Vue中class与style绑定以及条件与列表渲染的分析

本篇文章给大家分享了关于vue中class与style绑定以及条件与列表渲染的分析，有需要的朋友可以参考一下

目标：

熟练使用class与style绑定的多种方式

熟悉v-if与v-for的用法，以及v-if和v-for一起使用的注意事项

class与style绑定的多种方式

绑定class和style都是使用v-bind也就是:

立即学习“前端免费学习笔记（深入）”；

无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.

class和:class是共存的

绑定示例

1.class对象绑定

登录后复制

2.class数组绑定

登录后复制

3.style对象绑定

        
              ...    //styleObj写在data里面    data() {        return {            styleObj: {                color: 'black'            }        }    }    ...    

登录后复制

4.style数组绑定

登录后复制

v-if与v-for的用法

条件渲染

1.v-if=”表达式”, 表达式的真假值决定了是否挂载到页面上

     
这一段会在html里面,而且会显示出来
     
这段不会在html里面,也不会显示出来

登录后复制

2.v-show=”表达式”, 表达式的真假值决定了该节点的display属性是none / block

     
display: block,会显示出来
     
display: none,不会显示出来

登录后复制

3.区别: 功能都是一样,实现节点是否显示出来,但是v-if会操作dom,会重新渲染页面

4.v-if的话,还有v-if-else和v-else这两个命令, 不过要连着一起用,中间不能有其他东西隔开,使用规则和js的if..else语句一样

列表渲染

1.v-for of

登录后复制登录后复制{{item}}   //其中list为数组,item为数组元素     {{index}}{{item}}  //其中list为数组,index为索引(第一个0开始),item为数组元素

2.循环渲染对象

     //其中userInfo为对象, item为值, key为键, index为索引     

登录后复制{{item}}{{key}}{{index}}

3.一般会加个key值,避免互相影响(语法检测会检测这个,添加key值之后就会互相区分独立,相同部分也会重新渲染,不会复用)

登录后复制登录后复制   或

4.key和index是可选的

v-if和v-for一起使用的注意事项

1.v-for的优先级比v-if更高, 如果它们处于同一个节点,这样v-if将分别重复运行于每个v-for循环中.
也就是, 先执行v-for,v-for出来的每一项都会执行一次v-if.

登录后复制登录后复制  {{ todo }}

2.如果想先执行v-if再判断是否执行v-for, 可以将v-if置于外层元素(或template)上.

登录后复制登录后复制      {{ todo }}  

No todos left!

相关推荐：

对Vue的模板语法,计算属性,侦听器的分析

对于vue实例的分析

以上就是Vue中class与style绑定以及条件与列表渲染的分析的详细内容，更多请关注【创想鸟】其它相关文章！