Vue-----Vue本地应用篇（2）

李奕赫揍小邰

已于 2022-03-30 20:41:25 修改

阅读量767

点赞数 6

分类专栏： Vue学习文章标签：前端 java vue

于 2022-03-30 12:57:53 首次发布

本文链接：https://blog.csdn.net/weixin_54217216/article/details/123842248

版权

Vue学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

遇事不决量子力学
看完不赞你想咋办

文章目录

前言
一、显示切换，属性绑定
二、综合使用（图片转换）
总结

前言

上一篇介绍Vue的本地应用的一部分，这一篇将接着学习Vue的指令和应用

一、显示切换，属性绑定

1.v-show

❤v-show
根据表达值的真假，切换元素的显示和隐藏（如广告）
原理是修改元素的display,实现显示隐藏
指令后面的内容，最终都会解析为布尔值（表达式也可以解析为布尔值）
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

methods:{},就是在里面写触发事件的

<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <input type="button" value="累计年龄" @click="addAge">
    <img v-show="isShow" src="../img/1.jpg" alt="">
    <img v-show="age>=18" src="../img/2.jpg" alt="">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/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>

执行结果
本来isShow为false,点击按钮后就变为true,之后图片便能显示
v-show中可以写表达式，年龄未满18为false,当我们点击按钮就相当于加年纪，大于18就能显示
在这里插入图片描述

2.v-if

跟v-show一样的效果
根据表达值的真假，切换元素的显示和隐藏（操作dom元素）
本质是通过操作dom元素来切换显示状态
表达式的值为true,元素存在于dom树中，为false,从dom树中移除
❤频繁的切换v-show,反之使用v-if,前者的切换消耗小

<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">李奕赫</p>
    <p v-show="isShow">李奕赫 超级帅！</p>
    <h2 v-if="temperatrue>=35">热</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            temperatrue:40
        },
        methods:{
            toggleIsShow:function (){
                this.isShow=!this.isShow;
            }
        }
    })
</script>

执行结果
在这里插入图片描述

❤此时在浏览器右键点击检查,点击按钮后，我们发现都正常显示

在点击按钮让他们隐藏时,我们就能发现
v-show是利用display:none将其隐藏
v-if是直接将其注释掉，用法不一样

3.v-bind

❤设置元素的属性（比如src,title,class）
v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind,只保留：属性名
需要动态的增删class建议使用对象的方式

class类{active:Active}代表，如果Active是true则class为active，否则为空

 <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">  
    <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="{active:isActive}" @click="toggleActive"> <!--title属性代表鼠标悬停在图片上时出现的文字-->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            imgSrc:"../img/1.jpg",
            imgTitle:"lin",
            isActive:false
        },
        methods:{
            toggleActive:function (){
                this.isActive=!this.isActive;
            }
        }
    })
</script>

执行结果就不放了，大家可以自行操作，就是第二章图片点击后会出现一个红色的边框

二、综合使用（图片转换）

实现图片点击切换的过程

<div id="mask">
    <div class="center">
        <h2 class="title"></h2>
        李奕赫亲情创作
    <!--图片   alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本-->
    <img :src="imgArr[index]" alt="">
    <!--左箭头-->
    <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="../img/prev.png" alt="">
    </a>
    <!--右箭头-->
    <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="../img/next.png" alt="">
    </a>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
            imgArr:["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg",],
            index:0
        },
        methods:{
            prev:function (){
                this.index--;
            },
            next:function (){
                this.index++;
            }
        }
    })
</script>

css很复杂,有的注解我也写了出来

* {
    margin: 0;
    padding: 0;
}

html,
body,
#mask {
    width: 100%;
    height: 100%;
}

#mask {
    background-color:aquamarine;
    position: relative;
}

#mask .center {
    position: absolute;               /*检索对象的定位方式。*/
    background-color: #fff;
    left: 50%;
    top: 50%;
    /* transform：translate(-50%，-50%):向上（X轴）向左（Y轴）移动自身长宽的50%，使其位于中心。
        同理，需要按比例移动元素的话修改translate的值就可以做到。
        注意：需要居中的元素应为绝对定位（position: absolute;）
     */
    transform: translate(-50%, -50%);
    padding: 10px;
}
#mask .center .title {
    position: absolute;
    display: flex;      /*将对象作为弹性伸缩盒显示*/
    align-items: center;    /*定义在交叉轴上的对齐方式  center：中点对齐*/
    height: 56px;
    top: -61px;
    left: 0;
    padding: 5px;
    padding-left: 10px;
    padding-bottom: 0;
    color: rgba(175, 47, 47, 0.8);
    font-size: 26px;
    font-weight: normal;
    background-color: white;
    padding-right: 50px;
    z-index: 2;
}

#mask .center > img {       /*选中指定父元素E的指定子元素F*/
    display: block;
    width: 400px;
    height: 700px;
}

#mask .center a {
    text-decoration: none;
    width: 45px;
    height: 100px;
    position: absolute;
    top: 179px;
    vertical-align: middle;
    opacity: 0.5;
}
#mask .center a :hover {       /*选择鼠标移到链接上的样式*/
    opacity: 0.8;             /*设置 div 元素的不透明级别*/
}

#mask .center .left {
    left: 15px;
    text-align: left;
    padding-right: 10px;
    border-top-right-radius: 10px;          /*向 div 元素的右上角添加圆角边框*/
    border-bottom-right-radius: 10px;
}

#mask .center .right {
    right: 15px;
    text-align: right;
    padding-left: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

实现结果
在这里插入图片描述