Rumah > hujung hadapan web > tutorial js > Vue中class与style绑定以及条件与列表渲染的分析

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

不言
Lepaskan: 2018-07-17 16:41:37
asal
2707 orang telah melayarinya

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

目标:

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

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

class与style绑定的多种方式

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

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

  3. class和:class是共存的

绑定示例

1.class对象绑定

    <!-- 根据isActivity的真假,判断是否应用activity这个class -->
    <p :class="{activity:isActivity}"></p>
Salin selepas log masuk

2.class数组绑定

    <!-- 应用数组里面的class -->
    <p :class="[activity, activityOne]"></p>
Salin selepas log masuk

3.style对象绑定

    <!-- 应用这个样式对象的样式 -->
    <p :style="styleObj"></p>  
    
    <script>
    ...
    //styleObj写在data里面
    data() {
        return {
            styleObj: {
                color: &#39;black&#39;
            }
        }
    }
    ...
    </script>
Salin selepas log masuk

4.style数组绑定

    <!-- 应用这个数组里面的样式 -->
    <p :style="[styleObj,{fontSize:&#39;25px&#39;}]"></p>
Salin selepas log masuk

v-if与v-for的用法

条件渲染

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

     <p v-if="isTrue">这一段会在html里面,而且会显示出来</p>
     <p v-if="isFalse">这段不会在html里面,也不会显示出来</p>
Salin selepas log masuk

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

     <p v-show="isTrue">display: block,会显示出来</p>
     <p v-show="isFalse">display: none,不会显示出来</p>
Salin selepas log masuk

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

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

列表渲染

1.v-for of

     <li v-for="item of list">{{item}}</li>   //其中list为数组,item为数组元素
     <li v-for="(item,index) of list">{{index}}{{item}}</li>  //其中list为数组,index为索引(第一个0开始),item为数组元素
Salin selepas log masuk

2.循环渲染对象

     //其中userInfo为对象, item为值, key为键, index为索引
     <li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>
Salin selepas log masuk

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

     <li v-for="(item, index) of list" :key="index"></li>
   或<li v-for="(item, index) of list" :key="item.id"></li>
Salin selepas log masuk

4.key和index是可选的

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

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

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
Salin selepas log masuk

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

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>
Salin selepas log masuk

相关推荐:

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

对于vue实例的分析

Atas ialah kandungan terperinci Vue中class与style绑定以及条件与列表渲染的分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan