VUE快速入门-2

v-show

v-show指令的作用是:根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容,最终都会解析为布尔值

值为true元素显示,值为false元素隐藏

数据改变之后,对应元素的显示状态会同步更新

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-show指令title>
  head>
  <body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="累加年龄" @click="addAge">
      <img v-show="isShow" src="./img/monkey.gif" alt="">
      <img v-show="age>=18" src="./img/monkey.gif" alt="">
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
        methods: {
          changeIsShow:function(){
            this.isShow = !this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        },
      })
    script>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

频繁的切换v-show,反之使用v-if,前者的切换消耗小

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if指令title>
head>
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <input type="button" value="增加温度" @click="tmpAdd">
        <p v-if="isShow">黑马程序员p>
        <p v-show="isShow">黑马程序员 - v-show修饰p>
        <h2 v-if="temperature>=35">热死啦h2>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:30
            },
            methods: {
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                },
                tmpAdd:function(){
                    this.temperature++;
                }
            },
        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

v-bind

v-bind指令的作用是:为元素绑定属性(比如:src,title,class)

完整写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留 :属性名

需要动态的增删class建议使用对象的方式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令title>
    <style>
        .active{
            border: 1px solid red;
        }
    style>
head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在这里插入图片描述

案例：图片切换

列表数据使用数组保存

v-bind指令可以设置元素属性,比如src

v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./css/index.css" />
  head>

  <body>
    <div id="mask">
      <div class="center">
        <h2 class="title"><img src="./images/logo.png" alt=""> 深圳创维校区环境h2>
        <img :src="imgList[index]" alt="" />
        <a
          href="javascript:void(0)"
          @click="prev"
          class="left"
          v-show="index>0"
        >
          <img src="./images/prev.png" alt="" />
        a>
        <a
          href="javascript:void(0)"
          @click="next"
          class="right"
          v-show="index"
        >
          <img src="./images/next.png" alt="" />
        a>
      div>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
   
    <script>
      const app = new Vue({
        el: "#mask",
        data: {
          imgList: [
            "./images/00.jpg",
            "./images/01.jpg",
            "./images/02.jpg",
            "./images/03.jpg",
            "./images/04.jpg",
            "./images/05.jpg",
            "./images/06.jpg",
            "./images/07.jpg",
            "./images/08.jpg",
            "./images/09.jpg",
            "./images/10.jpg",
          ],
          index: 0
        },
        methods: {
          // 上一张
          prev() {
            this.index--;
          },
          // 下一张
          next() {
            this.index++;
          }
        }
      });
    script>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

在这里插入图片描述
源码下载

相关阅读:
支付通道的安全性探讨
 【Unity】预制体材质变(Clone)克隆体问题
 采用Dapr 的IoT 案例
 03_SpringBoot项目配置
 Redis快速复习
 poi-tl word模版生成、动态表格、坑点合集
 NestJS学习：控制器
 有效延缓痴呆症：延世大学发现梯度提升机模型能准确预测 BPSD 亚综合征
 队列的实现（c语言）
JVM内存模型和结构详解(五大模型图解)
原文地址：https://blog.csdn.net/weixin_44064908/article/details/126217633