Uni-app之Vue的组件用法

v-for指令渲染列表

---

v-for渲染列表

数据list数组

#key

   预期：number | string | boolean | symbol

    key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时，它会基于Key的变化重新排列元素顺序，并且会移除key不存在的元素。

    有相同父元素的子元素必须有独特的Key。重复的Key会造成渲染错误。

    最常见的组合   v-for :

        {{ item }}

它也可以用于强制替换元素/组件而不是重复使用它，当遇到如下场景可能会用到：1. 完整地触发组件的声明周期钩子  2. 触发过渡

        {{ text }}

// 当text发生改变时，总是会被替换而不是被修改，因此会触发过渡

绑定class的几种方式

---

通过数据驱动的方式实现类的动态化绑定

绑定class

绑定Style

---

绑定style

计算属性

---

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护

            {{ message.split('').reverse().join('') }}

    在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。因此，官网也说过，任何复杂的逻辑处理，都应使用计算属性。

       

message: "{{ message }}"

       

computed message : " {{ reversedMessage }} "

var    vm = new Vue({

        el : '#example',

        data ：{

            message : 'student'

        },

        computed ：{

            //计算属性的getter

            reversedMessage ：function () {

                        //  this 指向的是 vm 实例

                        return  this.message.split(' ').reverse().join()

            }

        }

})

条件渲染

---

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

必须是兄弟相连的元素，中间不能放其他的元素！

在