vue.js学习笔记（三）

淡淡的烟草味﹌ 2022-04-13 04:56 282阅读 0赞

### v-for ###

Vue中通过v-for指令来实现遍历数据渲染页面。

#### 1. 遍历数组 ####

*  `v-for="item in items"`  
    item：迭代得到的数组元素别名。  
    items：要遍历的数组，在vue的data中定义。

<div id="app">
        <ul>
            <li v-for="s in students">
                姓名：{
       {s.name}}，年龄：{
       {s.age}}，性别：{
       {s.gender}}
            </li>
        </ul>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app", data: { students:[ { name:"zhangSan",age:21,gender:"male"}, { name:"liSi",age:20,gender:"male"}, { name:"xiaoHong",age:18,gender:"female"}, { name:"xiaoLi",age:22,gender:"female"}, ], } }); </script>

*  `v-for="(item,index) in items"`  
    item：迭代得到的数组元素别名。  
    index：迭代到的当前元素索引，从0开始。  
    items：要遍历的数组，在vue的data中定义。

<div id="app">
        <ul>
           <li v-for="(s,index) in students">
                {
       {index+1}}、姓名：{
       {s.name}}，年龄：{
       {s.age}}，性别：{
       {s.gender}}
            </li>
        </ul>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app", data: { students:[ { name:"zhangSan",age:21,gender:"male"}, { name:"liSi",age:20,gender:"male"}, { name:"xiaoHong",age:18,gender:"female"}, { name:"xiaoLi",age:22,gender:"female"}, ], } }); </script>

#### 2. 遍历对象 ####

v-for="value in object"
    v-for="(value,key) in object"
    v-for="(value,key,index) in object"

1个参数时：value是对象的属性  
2个参数时，value是属性，key是键  
3个参数时，value是属性，key是键，index是索引（从0开始）

<div id="app">
        <ul>
            <li v-for="(value,key,index) in person">
                {
       {index+1}}、{
       {key}} - {
       {value}}
            </li>
        </ul>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app", data: { person:{ name:"李逍遥",age:19,gender:"男"} } }); </script>

当 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。  
若数据项顺序被改变，Vue 不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。  
这个功能可以有效的提高渲染的效率。  
要实现这个功能，则需要给Vue一些能跟踪每个节点的身份，从而重用和重新排序现有元素，因此需要为每项提供一个唯一 key 属性。  
理想的 key 值是每项都有的且唯一的 id。  
如：`v-for="(item,index) in items" :key=index` 此处使用绑定数组的索引index作为唯一的id

### v-if和v-show ###

1.  判断条件，结果为ture时，渲染页面元素

*  v-if：条件成立时才会被渲染
 *  v-show：切换CSS属性display，因此会一直被渲染并且保留在dom中
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>v-if & v-show</title>
            <style> .divColor{ height: 100px; width: 100px; background-color:aquamarine; } </style>
        </head>
        <body>
        <div id="app">
        	
            <button @click = "showVal= !showVal">切换</button><hr>
            <div class="divColor" v-if="showVal">v-if</div><hr>
            <div class="divColor" v-show="showVal">v-show</div>
        </div>
        
        <script src="node_modules/vue/dist/vue.js"></script>
        <script> const app = new Vue({ el:"#app", data: { showVal : true,//设值为true } }); </script>
        </body>
        </html>

![v-if和vi-show区别][v-if_vi-show]

1.  当v-if和v-for出现在一起时，v-for优先级更高。即先遍历后判断条件
    
        <div id="app">
        	<ul>
        		<li v-for="s in students" v-if="s.gender == 'male'">
        		    姓名：{
             {s.name}}，年龄：{
             {s.age}}，性别：{
             {s.gender}}
        		</li>
        	</ul>
        </div>
        <script src="node_modules/vue/dist/vue.js"></script>
            <script> const app = new Vue({ el:"#app", data: { students:[ { name:"zhangSan",age:21,gender:"male"}, { name:"liSi",age:20,gender:"male"}, { name:"xiaoHong",age:18,gender:"female"}, { name:"xiaoLi",age:22,gender:"female"}, ] } }); </script>
2.  v-if 还可以结合 v-else、v-else-if使用。v-if可以单独使用。后两者不能，必须结合v-if使用。
    
        <div id="app">
            <p v-if="showVal"> showVal = v-if !!!</p>
            <p v-else> showVal = v-else !!!</p>
        </div>
        <script src="node_modules/vue/dist/vue.js"></script>
        <script> const app = new Vue({ el:"#app", data: { showVal : true, } }); </script>

### v-bind ###

html属性不能使用花括号\{ \{\}\}进行数据绑定，因此只能使用v-bind指令  
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。  
表达式结果的类型除了字符串之外，还可以是对象或数组。  
v-bind 可以简写：如 v-bind:class 简写成 :class

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-demo</title>
        <style> div#box{ width: 100px; height: 100px; color: bisque; } .red{ background-color: red; } .blue{ background-color: blue; } </style>
    
    </head>
    <body>
    <div id="app">
        <button @click="color='red'">red</button>
        <button @click="color='blue'">blue</button>
        
        <div id="box" v-bind:class="color">
            BOX
        </div>
    </div>
    
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app", data: { color: "red", } }); </script>
    </body>
    </html>

### 计算属性：computed ###

本质就是方法，但是一定要返回数据。  
页面渲染时，可以将该方法当成变量来使用

<div id="app">
        <p>{
       {dayFun}}</p>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app", data: { testTime:1368230400000,//毫秒值 }, //计算属性 computed:{ //转换成日期 dayFun (){ const date = new Date(this.testTime); return date.getFullYear()+"."+date.getMonth()+"."+date.getDay(); } } }); </script>

### 监控：watch ###

用来监控数据的变化。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-demo-watch</title>
    </head>
    <body>
    <div id="app">
        
        <input type="text" v-model="msg">
        <p>修改前数据：{
       {oldValue}}，修改后数据：{
       {curValue}}</p>
    </div>
    
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> const app = new Vue({ el:"#app", data: { msg:"20181010", curValue:"20181010", oldValue:"20181010", }, watch:{ msg(curVal,oldVal){ this.curValue = curVal;//当前数据 this.oldValue = oldVal;//上一步数据 } } }); </script>
    </body>
    </html>

[v-if_vi-show]: /images/20220413/cab9696da11d474e8c6b513f12f68c64.png