Vuejs——(4)v-if、v-for

简介: (二十)v-if ①标准v-if用法 简单来说,该值为true则显示该标签,为false则不显示; 如例: [javascript] view plain copy   <div id="app">       <div v-if="abc">{{abc

(二十)v-if

简单来说,该值为true则显示该标签,为false则不显示;

如例:

<div id="app">
    <
div v-if="abc">{{abc.a}}</div>
</
div>
<
script>
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
abc: {
               
a: "1"
           
}
        }
    })
</script>

abc这个对象存在时,显示这一行数据,其内容为abc.a的值;

假如abc这个对象不存在,那么则不显示;

 

也可以用另外一个变量来控制其是否显示(能否显示决定于该值隐式转换为boolean类型时是true还是false);

例如假如上面有abc这个对象,但这个对象是空对象(没有属性a),但空对象隐式转换后为true,因此会有div,但这个div里没有内容;

 

 

template v-if 包装以同时影响多个html标签;

即假如多个标签(且他们是连续的),被一个变量控制是否显示,那么每个都这么写显然太繁琐,因此用一个template标签将这些标签包裹起来,用v-if标签控制该template标签是否显示,实际渲染时,template标签不会显示,只会显示其内的标签;

如示例:

<div id="app">
    <
template v-if="abc">
        <
div>{{abc[0]}}</div>
        <
div>{{abc[1]}}</div>
        <
div>{{abc[2]}}</div>
    </
template>
</
div>
<
script>
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
abc: [1, 2, 3]
        }
    })
</script>

 

由于非空数组是值为true,空数组的值为false,因此方便控制;

另外,这里只是演示,事实上更好的写法的v-for来控制内部三个标签来同时显示(当然,如果不需要显示全部的则不应该这么写);

显示内容:

<div id="app">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</div>

 

 

v-show     用于控制该标签的display样式

他的特点是,dom存在于页面内,已经渲染、事件绑定完毕,区别只是是否显示。

例如:

<div v-show="a">{{test}}</div>

a的值为true,则正常显示;

a的值为false,则自动添加display:none

 

v-show不支持template写法(即不能同时控制多个同级连续div);

 

v-else v-ifv-show的补充语句;

v-ifv-show的判断为true时,不显示v-else标签的内容;否则显示v-else标签的内容。

 

例如:

<div id="app">
    <
div v-show="a">{{test}}</div>
    <
div v-else>def</div>
</
div>
<
script>
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
a: true,
           
test: "abc"
       
}
    })
</script>

显示abc

若把data中的a改为false,则显示def

 

另外,标签之间需要连续,如以下,v-else则不能正常生效:

<div v-show="a">{{test}}</div>
<
div>another</div>
<
div v-else>def</div>

 

 

另外,不要在组件的情况下使用v-else,而是采用v-show=”!变量名来变相起到v-else的效果

 

 

⑤按照说明

 

v-if

v-show

渲染时间

第一次为真时

刚开始就渲染

切换形式

动态生成,局部编译/卸载

控制display属性

生成消耗

较小(只生成为真的部分)

较大(生成全部)

切换消耗

较大(切换时需要局部编译)

较小(因为生成时已经渲染完成)

 

v-if是在第一次条件为真时,进行渲染(比如他下面还有其他组件);

v-show因为只是控制display的属性,因此开始就会渲染;

 

 

(二十一)v-for列表渲染

①标准写法

<li v-for="i in items">{{i}}</li>

1items是一个对象或者数组;

2】该格式相当于for(var i in items){//}

3】插值的i相当于items[i]

4】该li会被复制多个,然后依次被items[i]渲染,直到渲染完毕;

示例:

<div id="app">
    <
ul>
        <
li v-for="i in items">{{i}}</li>
    </
ul>
</
div>
<
script>
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
items: {
               
a: "1",
               
b: "2",
                
c: "3"
           
}
        }
    })
</script>

结果:

<div id="app">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</div>

 

 

②索引编号:

在标签里使用$index,即表示当前索引在v-for中的编号(从0开始);

例如上面改为:

<li v-for="i in items">{{i}}'s index is {{$index}}</li>

显示的是从0~2

 

 

template v-for 用于包裹多个标签的v-for

简单来说,需要将多个标签都用v-for遍历,那么就需要用template标签。

同样,template在实际渲染的时候不会出现,只是起到一个包裹作用。

如代码:

<div id="app">
    <
ul>
        <
template v-for="i in items">
            <
li>Index is {{$index}}</li>
            <
li>Content is {{i}}</li>
        </
template>
    </
ul>
</
div>
<
script>
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
items: {
               
a: "1",
               
b: "2",
               
c: "3"
           
}
        }
    })
</script>

 

显示结果是:

<ul>

        <li>Index is 0</li><li>Content is 1</li>

        <li>Index is 1</li><li>Content is 2</li>

        <li>Index is 2</li><li>Content is 3</li>

</ul>

 

 

④监视数组变动(修改数组)

data的某个属性是一个数组时,用v-for可以遍历,但显然数组是可能变动的,因此对以下变动也进行数据绑定;

push()         数组末尾添加

pop()           数组末尾取出

shift()          数组开头取出

unshift()      数组开头添加

splice()        删除并插入

sort()           排序

reverse()     数组顺序颠倒

当利用以上方法变更数组时,被渲染的内容会实时更新;

 

 

⑤监视数组的改变(用另一个数组进行替换)

但数组从一个数组变为另一个数组时(记得,数组是按引用传递的),数据绑定依然生效;

但前提是使用以下方法:

filter()         过滤,参数是一个函数,取其返回值为true的元素被添加到新数组

concat()       合并两个数组,返回的数组是合并后的

slice()          返回数组的拷贝,从开始索引到结束索引(前含后不含)

 

 

track-by

按照说明,假如用一个新的对象数组来替换已有的对象数组(并且两个对象数组其对象的属性不同),那么由于v-for默认是通过数据对象的特征来决定已有作用域和DOM元素的复用程度,可能导致重新渲染整个列表(比如列表很大的话可能会导致效率很低)。

按照我的理解,大概就是从这样一个数组:(我推测是这样的

items: [
    {
name: "a", age: 10},
    {
name: "b", age: 11},
    {
name: "c", age: 12}
]

变成这样

items = [
    {
name: "A", height: 150},
    {
name: "B", height: 160},
    {
name: "C", height: 170}
]

 

会导致列表重新渲染,如果列表内容特别多,那么就可能带来影响效率和性能。

 

解决这种方法的办法,就是使用track-by,即加入一个包含某特定属性的标识符,当这个属性的标识符其值相等时,则尽可能复用这个已有对象的作用域和DOM元素。

例如标签写法如下:

<li v-for="item in items" track-by="id">{{item.name}}</li>

 

数据从:

items: [
    {
id: 1, name: "a", age: 10},
    {
id: 2, name: "b", age: 11},
    {
id: 3, name: "c", age: 12}
]

变为:

items = [
    {
id: 3, name: "A", height: 150},
    {
id: 2, name: "B", height: 160},
    {
id: 1, name: "C", height: 170}
]

那么在替换时,会复用。

注意,复用并不是使用之前同id的对象所在的dom位置,例如并不会将name=C的元素放在原有的name=a的元素的位置(即使他们id都为1),而是依然根据数组下标的顺序来显示数据。

 

 

track-by=”$index”

当数组没有某一个共同属性时(比如上面的id),但依然需要复用的话,那么就用这个。

他会强制v-for进入原位更新模式,片断不会被移动(我推测这个片断指v-fordom标签),简单的根据对应的索引的值来刷新dom,这种模式可以处理数组中重复的值。(应该是指对于重复的值,比如像上面那种id为同一个数值的,也可以正常复用)。

 

由于替换方式简单暴力(索引肯定是一样的),所以高效。

 

————————————————————————

 

这让数据替换非常高效,但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变,不能同步临时状态(比如 <input> 元素的值)以及组件的私有状态。因此,如果 v-for 块包含 <input> 元素或子组件,要小心使用 track-by="$index"

 

——————我表示以上这段话没看懂——————

如以下代码,reverse()依然在起作用啊

<div id="app">
    <
ul>
        <
li v-for="item in items" track-by="$index">{{item.name}}</li>
    </
ul>
    <
button onclick="chagne()">change</button>
</
div>
<
script>
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
items: [
                {
id: 1, name: "a", age: 10},
                {
id: 2, name: "b", age: 11},
                {
id: 3, name: "c", age: 12}
            ]
        }
    })
   
function chagne() {
       
vm.items = [
            {
id: 3, name: "A", height: 150},
            {
id: 2, name: "B", height: 160},
            {
id: 1, name: "C", height: 170}
        ];
       
vm.items.reverse();
    }
</script>

 

 

 

⑧数组的一些方法:

$set(索引, 被替换的值)

简单来说,以下代码是不会触发数据绑定的:

vm.items[0] = {name: "test"};

 

替代方法是:

vm.items.$set(0, {name: "test"});

 

 

$remove(被移除的对象)

假如要移除某个对象(注意,由于对象是按引用传递,因此不能简单用看起来一样的对象来移除某个对象),可以直接使用这个方法。具体代码是:

<script>
   
var test = {name: "test"};
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
items: [
                {
name: "a"},
                {
name: "b"},
                {
name: "c"}
            ]
        }
    })
   
vm.items.push(test);
   
function chagne() {
       
vm.items.$remove(test);
       
//vm.items.$remove({name: "test"}); //注意,这种写法是错误的
   
}
</script>

 

他相当于先用indexOf找到该对象的索引,再用splice来从数组中移除该对象。

 

 

Object.freeze(数组的对象元素)

假如数组中某一个元素(他是个对象)被Object.freeze冻结了,需要明确指定track-by,这种情况下,如果Vuejs不能自动追踪对象,将给出一条警告。

 

——不懂!——

反正被这样搞的对象,其值不能被修改,修改其值也没用(修改无效)

 

 

$key用于获取被遍历对象的key

js代码中,for(var i in items)中的i,记得,在v-for里,其是items[i]

仅对object对象生效,对数组无效(数组可以使用$index

如代码:

<div id="app">
    <
ul>
        <
li v-for="item in items" track-by="$index">{{$key}}: {{item}}</li>
    </
ul>
</
div>
<
script>
   
var test = {name: "test"};
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
items: {
               
name: "wd",
               
age: "27",
               
sex: "man"
           
}
        }
    })

</script>

 

显示内容为:

  • name: wd
  • age: 27
  • sex: man

 

这个key也可以使用别名,方法很简单,标签如下写:

<li v-for="(a_key,item) in items" track-by="$index">{{a_key}}: {{item}}</li>

这里的a_key就相当于$key

且他们之间不会互相冲突,并能同时使用。

 

注意:别名对数组有效$key对数组无效

 

 

⑩遍历顺序:

按照Object.keys()的结果遍历

例如:

var a = {a: 1, b: 2, c: 3};
Object.keys(a)

其返回结果是:

["a", "b", "c"]

 

然后会按照这个顺序来遍历,但其结果可能会因为javascript引擎的不同而不同(受影响的是对象);

 

 

⑪v-for一个数字

可以对一个数字使用v-for,例如:

<li v-for="(a_key,item) in 10" track-by="$index">{{a_key}}: {{item}}</li>

1】这个数字可以是一个浮点数;

2】从0开始,到小于这个数字的最大整数(例如10那么则到910.1则到10);

 

 

显示过滤、排序后的结果:

1】使用计算属性(computed),返回过滤、排序后的结果;

优点:可自定义,功能更强大,更灵活;

缺点:麻烦;

 

2】使用内置过滤器filterByorderBy

链接:http://cn.vuejs.org/api/#filterBy

 

 

3filterBy

简单来说,如果没有被过滤的内容,则被过滤掉,

如果是对象,则对keyval都有效(都会被检索),

如代码:

<div id="app">
    <
input v-model="input"/>
    <
p>请在输入框内输入内容,只会将符合条件的内容显示出来</p>
    <
ul>
        <
li v-for="item in items|filterBy input">{{item}}</li>
    </
ul>
</
div>
<
script>
   
var test = {name: "test"};
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
input: "",
           
items: {
                
name: "wd",
               
age: "27",
               
sex: "man"
           
}
        }
    })
</script>

 

注意:

1)假如输入‘a’,虽然name属性和age属性的值没有a,但是其key有,所以依然会显示;

2)不能只对其值(如果v-for的是一个对象的话)过滤生效,比如

<li v-for="item in items|filterBy input in 'item'">{{item}}</li>

是无效的写法!

3)如果要使用(2)中的方法,必须只能面对对象数组;

如以下:

<div id="app">
    <
input v-model="input"/>
    <
p>请在输入框内输入内容,只会显示name符合的</p>
    <
ul>
        <
li v-for="(key,item) in items|filterBy input in 'name'">age:{{item.age}},name:{{item.name}}</li>
    </
ul>
</
div>
<
script>
   
var test = {name: "test"};
   
var vm = new Vue({
       
el: '#app',
       
data: {
           
input: "",
           
items: [
                {
age: 1, name: "abc"},
                {
age: 2, name: "ab"},
                {
age: 3, name: "c"}
            ]
        }
    })
</script>

 

4)多字段过滤

如以下:

<li v-for="(key,item) in items|filterBy input in 'name''age'">age:{{item.age}},name:{{item.name}}</li>

 

无论是age符合或者是name符合,都可以正常显示。

 

5)动态多字段过滤

<div id="app">
    <
input v-model="input"/>
    <
p>请在输入框内输入内容,只会显示name符合的</p>
    <
ul>
        <
li v-for="(key,item) in items|filterBy input in List">age:{{item.age}},name:{{item.name}}</li>
    </
ul>
    <
button @click="change">点击搜索age</button>
</
div>
<
script>
   
var test = {name: "test"};
   
var vm = new Vue({
       
el: '#app',
       
data: {
            
input: "",
           
List: "name",
           
items: [
                {
age: 1, name: "abc"},
                {
age: 2, name: "ab"},
                {
age: 3, name: "c"}
            ]
        },
       
methods: {
           
change: function () {
               
this.List = "age";
            }
        }
    })
</script>

1)初始过滤name,点击按钮过滤age

2List可以是字符串,也可以是数组;

3)动态改变依然会生效;

 

4orderBy

用于排序的过滤,可以加参数,参数>=0则为正序排序,<0则为倒序排序

普通写法:

<li v-for="(key,item) in items|orderBy 'age'">age:{{item.age}},name:{{item.name}}</li>

根据age值,正序排列,显示:

  • age:2,name:ab
  • age:3,name:c
  • age:4,name:abc

 

<li v-for="(key,item) in items|orderBy 'name' -1"> age:{{item.age}},name:{{item.name}}</li>

根据name,倒序排列(因为参数为-1,其<0),字符串的排列顺序为逐字母比较顺序。

 

也可以使用函数作为排序条件,具体而言,如代码:

<div id="app">
    <
input v-model="input"/>
    <
p>请在输入框内输入内容,只会显示name符合的</p>
    <
ul>
        <
li v-for="(key,item) in items|orderBy test">age:{{item.age}},name:{{item.name}}</li>
    </
ul>
    <
button @click="test">点击搜索age</button>
</
div>
<
script>
   
var test = {name: "test"};
   
var vm = new Vue({
       
el: '#app',
       
data: {
            
items: [
                {
age: 5, name: "abc"},
                {
age: 2, name: "ab"},
                {
age: 13, name: "c"},
                {
age: 33, name: "c"},
                {
age: 3, name: "c"}
            ]
        },
       
methods: {
           
test: function (a, b) {
               
return a.age - b.age;
            }
        }
    })
</script>

他会根据age的值差进行排序,简单来说,a-b则为从小到大(这里指的是被排序的属性)),b-a则为从大到小。

 

如图结果为:

  • age:2,name:ab
  • age:3,name:c
  • age:5,name:abc
  • age:13,name:c
  • age:33,name:c
目录
相关文章
|
23天前
|
JavaScript
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南,涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
54 2
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
|
11天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
18天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
71 6
|
19天前
|
JavaScript 算法 前端开发
深入剖析Vue中v-for的使用及index作为key的弊端
深入剖析Vue中v-for的使用及index作为key的弊端
22 2
|
2月前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
24天前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
30 2
|
2月前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
18天前
|
JavaScript 算法 前端开发
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
11 0
|
3月前
|
JavaScript 前端开发 安全
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)
这篇文章详细介绍了Vue中常见的内置指令,如v-bind、v-model、v-for、v-on、v-if、v-else、v-show、v-text和v-html等,并通过代码示例演示了它们的使用和效果。
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)

相关实验场景

更多