zoukankan      html  css  js  c++  java
  • Vue学习第一天

    Vue学习第一天

    学习记录使用

    目录:

      1、vue介绍

        1_1):vue介绍

        1_2):库和框架的区别

        1_3):后端的mvc和前端的mvvm的区别

      2、vue的基本代码

      3、vue的插值表达式

      4、跑马灯案例

      5、事件修饰符

      6、v-model以及使用v-model实现简易计算器

      7、vue中样式

        7_1):class

        7_2):style

      8、vue中for循环

        8_1):循环遍历普通数组

        8_2):循环遍历对象数组

        8_3):循环遍历对象属性

        8_4):循环指定次数

        8_5):循环中key的使用

      9、vue中v-if和v-show的使用

    1、Vue介绍

     1_1):vue介绍

     以前没用类似vue这种框架的时候,经常要在页面使用jq或者js操作dom元素,这就很恼火,代码很杂,冗余,然后这个vue解决的最大的问题就是我们不需要再去操作dom,而是只操作数据,不关心dom的操作。

     1_2):库和框架的区别

     库是类似于一个插件,提供某一部分的功能。

     框架是一整套的解决方案。

     1_3):后端MVC和前端MVVM的区别

     首先mvc是后端的概念,mvvm是前端的概念。

    mvc但是model、view,controller,mvvm是model、view、viewModel

    前端mvvm的意思就是将页面和数据分离,model就代表这数据,view就代表着页面,viewModel就是控制model和view之间的关系(如将model中某些数据显示到view中)。

     2、Vue的基本代码

     1、导入vue的js

     2、写一个div作为根容器,搞一个id为app

     3、写js代码,创建一个new Vue,参数为一个json串,json串内有el属性,代表着需要接管的区域,然后data属性就是数据。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="./lib/vue-2.4.0.js"></script>
     7 </head>
     8 <body>
     9 
    10 <div id="app">
    11     {{msg}}
    12 </div>
    13 
    14 <script>
    15     /*需要创建一个Vue实例,*/
    16     // 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数
    17     //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
    18     var vm = new Vue({
    19         el: "#app",  // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
    20         // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
    21         data: { // data 属性中,存放的是 el 中要用到的数据
    22             msg: "学习Vue的第一天" // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
    23         }
    24     });
    25 </script>
    26 </body>
    27 </html>
    vue的基本代码

     3、Vue的插值表达式

       1、{{表达式}}

       2、v-cloak:解决文字闪动,就是数据没出来时来个display:none

       3、v-text:会覆盖元素中原有内容,一样可以解决文字闪动

       4、v-html:内容会被当成HTML代码被解析

       5、v-bind:属性名,绑定元素的属性为我们指定的表达式,例如v-bind:title,可以简写为例如:title

       6、v-on:事件名,绑定事件,事件写在vue参数的mehods中,例如v-on:click,可以简写为@click

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <!--    <script src="lib/vue-2.4.0.js"></script>-->
     7     <style type="text/css">
     8         [v-cloak] {
     9             display: none;
    10         }
    11     </style>
    12 </head>
    13 <body>
    14 
    15 <div id="app">
    16     <!--v-cloak可以解决文字闪动,就是在标签数据未填充的时候给这个元素设置样式为display:none-->
    17     <p v-cloak>===={{msg}}====</p>
    18     <!--v-text会覆盖元素上原有数据,可以和v-cloak一样的效果-->
    19     <p v-text="msg">======</p>
    20     <!--v-text不会将数据看作html-->
    21     <p v-text="msg2"></p>
    22     <!--v-html会将数据看作html-->
    23     <p v-html="msg2"></p>
    24     <!--
    25     v-bind:属性名    绑定一个数据,数据改变了以后,对应绑定的标签属性值也会跟着改变-,
    26     v-bind中可以写合法的表达式,因为他是把绑定的值当作一个变量
    27     -->
    28     <input type="button" v-bind:value="msg3" v-bind:title="msg3 + '是msg3变量的值'"></input>
    29     <br><br>
    30     <!--v-bind:属性名可以简写为 :属性名-->
    31     <input type="button" :value="msg3" :title="msg3 + '是msg3变量的值'"></input>
    32 
    33     <!--v-on:事件='js',绑定事件-->
    34     <button v-on:click="showAlert" :title="msg4">测试事件</button>
    35     <br><br>
    36     <!--可以简写为:@事件='js',也就是可以把v-on:简写为@-->
    37     <button @click="showAlert">测试事件</button>
    38 
    39     <button type="button" v-bind:title="msg4">测试v-bind</button>
    40     <!--v-bind:可以简写为:-->
    41     <button type="button" :title="msg4">测试v-bind</button>
    42     <!--v-on:事件名-->
    43     <button type="button" :title="msg4" v-on:click="showAlert">测试v-on</button>
    44     <!--可以简写为@事件名-->
    45     <button type="button" :title="msg4" v-on:click="showAlert">测试v-on</button>
    46 
    47 </div>
    48 <script src="lib/vue-2.4.0.js"></script>
    49 <script>
    50     new Vue({
    51         el: "#app",
    52         data: {
    53             msg: "数据",
    54             msg2: "<h1>我是msg2</h1>",
    55             msg3: "数据3",
    56             msg4: "测试事件的按钮"
    57         }, methods: {
    58             /*定义的方法*/
    59             showAlert: function () {
    60                 alert("测试事件")
    61             }
    62         }
    63     });
    64 </script>
    65 
    66 </body>
    67 </html>
    Vue的插值表达式

     4、跑马灯案例

     核心就是来一个定时器,定时的把字符串的第一位放到最后一位去,然后需要注意的就是重复开启定时器,使用一个标志来判断就好了。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <div id="app">
     9     <button @click="lang">浪起来</button>
    10     <button @click="stop">低调</button>
    11     <p v-text="content" style="font-weight: bold"></p>
    12 </div>
    13 <script src="lib/vue-2.4.0.js"></script>
    14 <script>
    15     new Vue({
    16         el: '#app',
    17         data: {
    18             content: "一二三四五六七八九十!",
    19             interId: null
    20         }, methods: {
    21             lang() {
    22                 /*
    23                 * 定时任务,如果使用() =>{}的方式来实现匿名方法,那么内部的this就是外部的this
    24                 * */
    25                 if (this.interId == null) {
    26                     this.interId = setInterval(() => {
    27                         var pre = this.content.substring(0, 1);
    28                         var end = this.content.substring(1);
    29                         this.content = end + pre;
    30                     }, 100);
    31                 }
    32             },
    33             stop() {
    34                 clearInterval(this.interId);
    35                 this.interId = null;
    36             }
    37 
    38         }
    39     });
    40 </script>
    41 </body>
    42 </html>
    跑马灯案例

     5、事件修饰符

       1、.stop:阻止冒泡,例如我在现在的button上的click上写这么一个修饰符,那么就代表阻止该button后面的所有冒泡事件

       2、.prevent:阻止默认行为,比如说我们的a标签默认行为就是跳转,当我们在a标签上放置一个click事件以后,click事件会被触发,但是a标签默认的跳转行为仍然会执行如果加上了prevent修饰符,那么改标签原来的行为就会被阻止。

       3、.capture:捕获触发事件的机制,例如原本我们这里应该是冒泡机制,也就是先打印btnMethod,然后打印innerMethod,但是用了capture这个修饰符以后,事件的机制就被改变,就变成了先打印innerMethod,然后打印btnMethod。

       4、.once:只触发一次事件处理函数。比如说.prevent,它可以阻止事件的默认行文,那么我们可以这样,让他第一次点击的时候阻止它的默认行为,后面就不阻止。例如a标签,第一次点击的时候,让他的a标签行为被阻止,然后后面就让不阻止它a标签的默认行为。

       5、.self:阻止自身的冒泡行为

                .stop和.self的不同:

                    stop是阻止后面的所有的冒泡行为

                    self是阻止自己身上的冒泡行为

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 
      4 <head>
      5     <meta charset="UTF-8">
      6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7     <title>Document</title>
      8     <style>
      9         * {
     10             margin: 0px;
     11             padding: 0px;
     12         }
     13 
     14         .inner {
     15             margin: 20px;
     16             width: 100%;
     17             height: 300px;
     18             background-color: #007acc;
     19         }
     20         .inner2 {
     21             margin: 20px;
     22             width: 100%;
     23             height: 500px;
     24             background-color: #cd6121;
     25         }
     26     </style>
     27 </head>
     28 
     29 <body>
     30     <div id="app" >
     31         <!-- 冒泡机制:子元素中的事件触发后,父元素中的事件也会被触发。 -->
     32         <!-- 
     33             事件修饰符: 
     34             .stop:阻止冒泡,例如我在现在的button上的click上写这么一个修饰符,那么就代表阻止该button后面的所有冒泡事件。
     35         -->
     36         <!-- <div class="inner" @click="innerMethod">
     37             <button @click.stop="btnMethod" style="margin: 20px;padding: 20px;font-size: 30px;">这是一个按钮</button>
     38         </div> -->
     39         
     40         <!-- 
     41             事件修饰符:
     42             .prevent:阻止默认行为,比如说我们的a标签默认行为就是跳转,当我们在a标签上放置一个click事件以后,click事件会被触发,但是a标签默认的跳转行为仍然会执行
     43                       如果加上了prevent修饰符,那么改标签原来的行为就会被阻止。
     44          -->
     45          <!-- <a href="http://www.baidu.com" @click.prevent="toBadidu">去往百度</a> -->
     46 
     47          <!-- 事件修饰符:
     48               .capture:捕获触发事件的机制,
     49                 例如原本我们这里应该是冒泡机制,也就是先打印btnMethod,然后打印innerMethod,但是用了capture这个修饰符以后,
     50                 事件的机制就被改变,就变成了先打印innerMethod,然后打印btnMethod。
     51          -->
     52         <!-- <div class="inner" @click.capture="innerMethod">
     53             <button type="button" style="margin: 20px;padding: 20px;font-size: 30px;" @click="btnMethod">我是按钮</button>
     54         </div> -->
     55         
     56         <!-- 
     57             事件修饰符:
     58             .once:只触发一次事件处理函数。
     59             比如说.prevent,它可以阻止事件的默认行文,那么我们可以这样,让他第一次点击的时候阻止它的默认行为,后面就不阻止。
     60             例如a标签,第一次点击的时候,让他的a标签行为被阻止,然后后面就让不阻止它a标签的默认行为。
     61         -->
     62         <!-- <a href="http://www.baidu.com" @click.prevent.once="toBadidu">去百度</a> -->
     63         
     64         <!-- 事件修饰符:
     65             .self:阻止自身的冒泡行为
     66             
     67             .stop和.self的不同:
     68                 stop是阻止后面的所有的冒泡行为
     69                 self是阻止自己身上的冒泡行为
     70         -->
     71         <div class="inner2" @click="innerMethod2">
     72             <div class="inner" @click.self="innerMethod">
     73                 <button type="button" style="margin: 20px;padding: 20px;font-size: 30px;" @click="btnMethod">我是按钮</button>
     74              </div>
     75          </div>
     76 
     77     </div>
     78 </body>
     79 <script src="lib/vue-2.4.0.js"></script>
     80 <script>
     81     new Vue({
     82         el: "#app",
     83         data: {
     84 
     85         },
     86         methods: {
     87             innerMethod(){
     88                 console.log("innerMethod");
     89             }, 
     90             btnMethod(){
     91                 console.log("btnMethod");
     92             },
     93             innerMethod2(){
     94                 console.log("innerMethod2");
     95             },
     96             toBadidu(){
     97                 console.log("去百度了");
     98             }
     99 
    100         }
    101     });
    102 </script>
    103 
    104 </html>
    Vue的事件修饰符

     6、v-model以及使用v-model实现简易计算器

     v-model(只能应用到表单元素中):

                    双向数据绑定,

                    vm的嘛,v是视图,m是model,m中修改了v中就会修改,v中修改了m中也会修改

                    通俗的话,比如我们的v-model写在了input中,我们代码中对绑定的数据就行修改了,那么input上也会相应的更改数据的显示

                             我们在input中输入了东西,那么Vue实例中绑定的数据也会相应的更改。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>v-mode使用</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <!-- 
    10             v-model(只能应用到表单元素中):
    11                 双向数据绑定,
    12                 vm的嘛,v是视图,m是model,m中修改了v中就会修改,v中修改了m中也会修改
    13                 通俗的话,比如我们的v-model写在了input中,我们代码中对绑定的数据就行修改了,那么input上也会相应的更改数据的显示
    14                          我们在input中输入了东西,那么Vue实例中绑定的数据也会相应的更改。
    15                 
    16                 可以在console中进行测试:
    17                    > window.vue.name
    18                    < "这是一个name"
    19                    > window.vue.name
    20                    < "这是一个name啊啊按时啊啊"
    21                    > window.vue.name="哈哈"
    22                    < "哈哈"
    23          -->
    24          <input type="text" name="" v-model="name">
    25     </div>
    26 <script src="lib/vue-2.4.0.js"></script>
    27 <script>
    28     var vue = new Vue({
    29         el: "#app",
    30         data: {
    31             name: "这是一个name"
    32         },methods:{
    33             
    34         }
    35     });
    36 </script>
    37 </body>
    38 </html>
    v-model使用
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Document</title>
     7 </head>
     8 
     9 <body>
    10     <div id="app">
    11         <input type="number" v-model="num1">
    12         <select v-model="opt">
    13             <option value="+">+</option>
    14             <option value="-">-</option>
    15             <option value="*">*</option>
    16             <option value="/">/</option>
    17         </select>
    18         <input type="number" v-model="num2">
    19         =
    20         <input type="text" v-model="result">
    21         <button @click="calcute">计算</button>
    22     </div>
    23 </body>
    24 <script src="lib/vue-2.4.0.js"></script>
    25 <script>
    26     var vue = new Vue({
    27         el: "#app",
    28         data: {
    29             num1: 0,
    30             num2: 0,
    31             result: 0,
    32             opt: "+"
    33         }, methods: {
    34             calcute() {
    35                 switch (this.opt) {
    36                     case "+":
    37                         this.result = parseInt(this.num1) + parseInt(this.num2)
    38                         break;
    39                     case "-":
    40                         this.result = parseInt(this.num1) - parseInt(this.num2)
    41                         break;
    42                     case "*":
    43                         this.result = parseInt(this.num1) * parseInt(this.num2)
    44                         break;
    45                     case "/":
    46                         this.result = parseInt(this.num1) / parseInt(this.num2)
    47                         break;
    48                     default:
    49                         break;
    50                 }
    51             }
    52         },
    53     });
    54 </script>
    55 
    56 </html>
    使用v-model实现简易计算器

     7、vue中样式

     7_1):class

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7         /* 随便来两个样式 */
     8         .style1{
     9             color: red;
    10         }
    11         .style2{
    12             font-size: 50px;
    13         }
    14         .style3{
    15             font-weight: 100;
    16             /* font-family: "微软雅黑"; */
    17         }
    18     </style>
    19 </head>
    20 <body>
    21     <div id="app">
    22         <!-- 原先HTML中给元素增加样式的话话,直接使用class属性,多个样式使用空格区分 -->
    23         <!-- <h1 class="style1 style2">这是一段h1的文字</h1> -->
    24         
    25         <!-- 在vue中给元素增加样式,可以直接使用v-bind把class绑定,然后进行指定样式 -->
    26         <!-- 1、直接传递一个数组,需要注意因为我们传入的是数组,也就是使用了vue的方式,所以要给class绑定 -->
    27         <!-- <h1 :class="['style1','style2','style3']">我应用了三个样式</h1> -->
    28         <!-- 2、我们还可以在里面编写三元表达式,注意这里的flag是在data中的数据,不要给他加单引号 -->
    29         <!-- <h1 :class="['style1','style2',flag?'style3':'']">我使用了三元表达式</h1> -->
    30         <!-- 3、我们还可以使用对象来代替三元表达式,使用方法就是把数组中的一个元素更改为 {'样式名':表达式} -->
    31         <!-- <h1 :class="['style1','style2',{'style3':flag}]">我使用了对象来代替三元表达式</h1> -->
    32         <!-- 4、还可以直接写一个变量 -->
    33         <h1 :class="h1Obj">我的样式直接被写了一个变量,这个变量的值就是我的样式,变量在data中</h1>
    34     </div>
    35 </body>
    36 <script src="lib/vue-2.4.0.js"></script>
    37 <script>
    38     var vue = new Vue({
    39         el: "#app",
    40         data: {
    41             flag: true,
    42             h1Obj: { style1: true, style2: true, style3: true }
    43         },methods: {
    44             
    45         },
    46     });
    47 </script>
    48 </html>
    class

      7_2):style

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style></style>
     7 </head>
     8 <body>
     9     <div id="app">
    10         <!-- 上一个是直接绑定class,我们其实还可以直接绑定style,因为绑定的内容会被当做表达式,所以我们也是直接在data中书写style的内容 -->
    11         <!-- <h1 :style="h1Style">我的style被绑定了!</h1> -->
    12         <!-- 上面我们只绑定了一个,我们还可以用数组来绑定多个 -->
    13         <h1 :style="[h1Style,h1Style2]">我的style被绑定了多个</h1>
    14     </div>
    15 </body>
    16 <script src="lib/vue-2.4.0.js"></script>
    17 <script >
    18     var vue = new Vue({
    19         el: "#app",
    20         data:{
    21             h1Style: {'font-size':'50px' },
    22             h1Style2: {color: 'red'}
    23         },methods: {
    24             
    25         },
    26     });
    27 </script>
    28 </html>
    style

     8、vue中的循环

     

    8_1):循环遍历数组

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <!-- 语法:v-for="每一项 in 表达式(可以是数组,可以是变量,可以是方法)" -->
    10         <!-- <h4 v-for="item in list1">{{item}}</h4> -->
    11         <!-- 我们通常都需要获取每次循环的当前index, -->
    12         <h4 v-for="(item,index) in list1">值:{{item}} 下标:{{index}}</h4>
    13     </div>
    14 <script src="lib/vue-2.4.0.js"></script>
    15 <script>
    16     var vue = new Vue({
    17         el: "#app",
    18         data: {
    19             list1:["张三","李四","王麻子","赵六呀"]
    20         },methods: {
    21             
    22         },
    23     });
    24 </script>
    25 </html>
    循环遍历数组

      

    8_2):循环对象数组

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <!-- for循环遍历对象数组和遍历普通数组的方式完全一样,只是遍历的数据不一样而已 -->
    10         <h1 v-for="(item,index) in list1">
    11             内容:{{item.name}} 下标:{{index}}
    12         </h1>
    13     </div>
    14 </body>
    15 <script src="lib/vue-2.4.0.js"></script>
    16 <script>
    17     var vue = new Vue({
    18         el: "#app",
    19         data:{
    20             list1: [
    21                 {name:"张三"},{name:"李四"},{name:"王五"}
    22             ]
    23         },methods: {
    24             
    25         },
    26     });
    27 </script>
    28 </html>
    循环遍历对象数组

    8_3):循环对象属性

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <!-- 如果是这种遍历,那么就可以有三个参数,第一个为遍历出来的值,第二个为键,第三个为下标 -->
    10         <h1 v-for="(item,key,i) in obj">
    11             第{{i+1}}个属性的名字为{{key}},值是:{{item}}
    12         </h1>
    13     </div>
    14 </body>
    15 <script src="lib/vue-2.4.0.js"></script>
    16 <script>
    17     var vue = new Vue({
    18         el: "#app",
    19         data: {
    20             obj: { name: "赵六", gender: "", age: 20}
    21         },methods: {
    22             
    23         },
    24     })
    25 </script>
    26 </html>
    循环遍历对象属性

     8_4):循环指定次数

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <!-- 前面说过in后面的是一个表达式,那么就代表着也可以是一个数字 -->
    10         <h1 v-for="count in 10">这是第{{count}}次循环</h1>
    11     </div>
    12 </body>
    13 <script src="lib/vue-2.4.0.js"></script>
    14 <script>
    15     var vue = new Vue({
    16         el: "#app",
    17         data:{
    18 
    19         },methods: {
    20             
    21         },
    22     })
    23 </script>
    24 </html>
    循环指定次数

      8_5):循环中key的使用

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         id:
    10         <input type="text" v-model="id">
    11         name:
    12         <input type="text" v-model="name">
    13         <button @click="add">添加</button>
    14         <br>
    15         <!-- 如果就这样运行会出现一个问题,当我们选中了第一个以后,添加一次,那么选中就会变成新添加的那个,而我们原来选中的就不会被选中 -->
    16         <!-- <h4 v-for="item in list"> -->
    17             <!-- 针对这种情况,我们就可以使用key来标识当前列,这样就就不会出现上面的情况了, -->
    18             <!-- 需要注意的是,key是需要v-bind绑定的,而且只能为number或者string -->
    19         <h4 v-for="item in list" :key="item.id">
    20             <input type="checkbox" >{{item.id}}----{{item.name}}
    21         </h4>
    22     </div>
    23 </body>
    24 <script src="lib/vue-2.4.0.js"></script>
    25 <script>
    26     var vue = new Vue({
    27         el: "#app",
    28         data:{
    29             id:'',
    30             name:'',
    31             list:[
    32                 {id:1,name:"张三"},
    33                 {id:2,name:"李四"},
    34                 {id:3,name:"王五"},
    35                 {id:4,name:"赵六"},
    36                 {id:5,name:"田七"}
    37             ]
    38         },methods: {
    39             add(){
    40                 /*添加到集合的顶部*/
    41                 this.list.unshift({id:this.id,name:this.name});
    42             }
    43         }
    44     })
    45 </script>
    46 </html>
    循环中kye的使用

    9、v-if和v-show的使用

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <button @click="flag=!flag">切换</button>
    10         <h1 v-if="flag">使用v-if的</h1>
    11         <h1 v-show="flag">使用v-show的</h1>
    12         <!-- 当我们点击切换的时候会发现,
    13             当flag为false时:
    14                 v-if的元素就不存在
    15                 v-show的元素而是给它加了一个display:none达到不显示的效果
    16             当flag为true时:
    17                 v-if的元素被创建
    18                 v-show的元素依然被创建,只是display:none被删除
    19             得出结论:
    20                 当元素会被频繁的切换的时候,使用v-show,因为v-show只是修改style属性,而v-if则是直接删除/创建元素。
    21                 当元素仅仅是判断是否显示的时候,使用v-if,如果使用v-show,那么元素仍然被创建,只是利用display:none达到不显示的效果    
    22         -->
    23     </div>
    24 </body>
    25 <script src="lib/vue-2.4.0.js"></script>
    26 <script>
    27     var vue = new Vue({
    28         el: "#app",
    29         data: {
    30             flag: true
    31         },methods: {
    32             
    33         },
    34     });
    35 </script>
    36 </html>
    v-if和v-show 的使用
  • 相关阅读:
    手机微信浏览器手动清楚浏览器缓存
    CSS 图像精灵怎么用(css sprites定位技术) 图标定位
    电商平台应该分析哪些数据?具体怎么去分析?
    酷家乐装修方案
    字体识别(根据图片截图识别字体) 求字体
    酿造系列:自己酿造夏日饮用的低度甜酒好喝吗?如何酿造?
    xcode Xcode_9.2.xip 官方离线下载地址
    nginx给server增加日志配置
    用monit监控mongodb,崩溃后自动重启mongdb
    电商产品经理进阶一:电商基础流程
  • 原文地址:https://www.cnblogs.com/daihang2366/p/12753236.html
Copyright © 2011-2022 走看看