vue 条件渲染与列表渲染

清疚 2024-04-18 23:53 82阅读 0赞

### 文章目录 ###

*  vue 渲染
 *   *  条件渲染
     *   *  v-if 与 v-else渲染 以及 v-show
     *  列表渲染
     *   *  遍历对象
     *  vue 数组以及对象更新元素
     *   *  Vue 可以检测的变化
         *  Vue 无法检测到的变化

# vue 渲染 #

## 条件渲染 ##

### v-if 与 v-else渲染 以及 v-show ###

v-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载，多余if不会存在内存中。

> v-if和v-else直接控制 DOM 是否被渲染，而v-show则是通过控制 css 的方式来控制 DOM 是否展示。  
> 在v-if中，如果一开始条件为假，则 Vue 什么也不会做，当条件变为真的时候，Vue 才会去渲染这一部分 DOM，当条件再次变为假的时候，与这一块相关的所有内容都会被从 DOM 树中删除掉。  
> 而v-show则要简单的多，它仅仅是通过控制 css 中的 display 来控制 DOM 的显示和隐藏。

<div id="app1">
     
     
        <p v-if="isTrue"> isTrue 是 true 显示   </p>
        <p v-else> isTrue 是 false 显示  </p>
    
    
        根据 type 值显示 div内容
    
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    
    
        <h4> v-show </h4>
        另一个用于根据条件展示元素的选项是 v-show 指令。用法大致与v-if一样：
        不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
        <p v-show="ishow"> ishow 是 true 显示   </p>
     
    
    
    
    </div>

vue代码

//if else show 条件渲染
        var a = new Vue({ 
            el:'#app1',
            data: { 
                //绑定默认css属性
                isTrue: false,
                ishow: true,
                type:'B'
            }
        });

## 列表渲染 ##

用 v-for 把一个数组对应为一组元素

### 遍历对象 ###

v-for 来遍历一个对象的属性。

> v-for=“item in items”

<ul id="example-1">
            <li v-for="item in items">
                {
       { item.message }}
            </li>
        </ul>

提供第二个的参数为 property 名称 (也就是键名)：

> (value, name) in object

<ul id="example-2">
            <li v-for="(item,index) in items">
                 {
       {index}}  -----   {
       { item.message }}
            </li>
        </ul>

可以用第三个参数作为索引：

> (value, name, index) in object

属性值 key 索引
        <ul id="example-3">
            <li v-for="(value, key, index) in object">
               {
       {index}}---- {
       {key}}  -----   {
       { value }}
            </li>
        </ul>

html 代码

<div id="app2">
      
    
        <ul id="example-1">
            <li v-for="item in items">
                {
       { item.message }}
            </li>
        </ul>
    
        索引显示
        <ul id="example-2">
            <li v-for="(item,index) in items">
                 {
       {index}}  -----   {
       { item.message }}
            </li>
        </ul>
    
     
        属性值 key 索引
        <ul id="example-3">
            <li v-for="(value, key, index) in object">
               {
       {index}}---- {
       {key}}  -----   {
       { value }}
            </li>
        </ul>
    
        <h5>过滤数组</h5>
    
    
        <ul id="example-4">
            <li v-for=" n in evenNumbers">
                 {
       { n }}
            </li>
        </ul>
    
         <h5>v-for 也可以接受整数</h5>
    
        <div>
            <span v-for="n in 10">{
       { n }} </span>
        </div>
    
    
        <h5>你也可以利用带有 v-for 的 template 来循环渲染一段包含多个元素的内容</h5>
    
        <ul>
            <template v-for="item in items">
                <li>{
       { item.message }}</li>
                <li class="divider" role="presentation">  presentation </li>
            </template>
        </ul>
    </div>

vue代码

// for 渲染列表
        var a = new Vue({ 
            el:'#app2',
            data: { 
                items: [
                    {  message: 'Foo1' },
                    {  message: 'Bar2' },
                    {  message: 'Bar3' },
                    {  message: 'Bar4' },
                    {  message: 'Bar5' },
                ],
                object: { 
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                //排序
                numbers: [ 1, 2, 3, 4, 5 ],
    
            },
            //计算属性 初始化
            computed: { 
                // 过滤数组
                evenNumbers: function () { 
                    return this.numbers.filter(function (number) { 
                        return number % 2 === 0
                    });
                }
            }
        });
    
    
    
    </script>

## vue 数组以及对象更新元素 ##

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

1 、不能通过用数组下边去对数组元素进行更新  
2 、 不能用对象.key 的 去修改对象属性值

### Vue 可以检测的变化 ###

可以使用Vue 提供的编译方法，用来返回一个新的数组，并且可以被Vue 检测到然后响应式渲染。

现有数据字段的变化：item[0].isShow = true;  用来表示是否显示此条数据
    通过Vue.set(object, key, value)的方式添加的属性
    通过Vue.delete(object, Key)的方式删除的属性
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    filter()
    concat()
    slice()

### Vue 无法检测到的变化 ###

利用索引去设置新的数据时：items\[indexOfItem\] = newItem;  
直接修改数组的长度时：items.length = newLength;  
直接去添加或删除对象的属性：app.dataSource.newKey = ‘newKey’

<div id="app">
        <ul>
            <li v-for="(item, index) in items" v-if="item.isShow" :key="index">
                <p>{
       {index}}</p>
                <p>{
       {item.name}}</p>
                <p>￥{
       {item.price}}</p>
            </li>
        </ul>
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                items: [
                    {
                        name: 'android',
                        price: '12.00',
                        isShow: false  // 用来表示是否显示磁条数据
                    },
                    {
                        name: 'js',
                        price: '13.00',
                        isShow: true
                    }
                ]
            }
        });
    </script>