Vue快速入门（3）

最新推荐文章于 2023-09-14 09:10:51 发布

HopeStation

最新推荐文章于 2023-09-14 09:10:51 发布

阅读量218

点赞数

分类专栏： Vue笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_33747081/article/details/106445940

版权

Vue笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue指令

v-show

作用：根据表达式的真假，切换元素的显示和隐藏
原理是修改元素的display属性，实现显示隐藏
数据改变之后，元素状态同步更新
程序例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令</title>
    <style>
        img{
            width: 10%;
            height: 10%;
        }
    </style>
</head>
<body>
    <div id="app">
    
        <h3>v-show="true"</h3>
       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590846954790&di=fe3e2140ba239cfc59d924c6405d75aa&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F357d23d074c2954d568d1a6f86a5be09d190a45116e95-0jh9Pg_fw658"
         v-show="true"><br><br>

        <button @click="changeIsShow">v-show="isShow"</button><br>
       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590846954790&di=fe3e2140ba239cfc59d924c6405d75aa&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F357d23d074c2954d568d1a6f86a5be09d190a45116e95-0jh9Pg_fw658" 
         v-show="isShow"><br>

         <h3 @click="add" >age={{age}},点我增加年龄</h3>
       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590846954790&di=fe3e2140ba239cfc59d924c6405d75aa&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F357d23d074c2954d568d1a6f86a5be09d190a45116e95-0jh9Pg_fw658" 
         v-show="age>=18">
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
           el:"#app",
           data:{
               isShow:true,
               age:17
           },
           methods:{
               changeIsShow:function(){
                this.isShow=!this.isShow;
               },
               add:function(){
                   this.age++;
               }
           }
       })
    </script>
</body>
</html>

运行结果：

v-if

作用：根据表达式的真假，切换元素的显示和隐藏
原理是表达式为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">
    <title>vue指令</title>
    <style>
        img{
            width: 10%;
            height: 10%;
        }
    </style>
</head>

<body>


    <div id="app">
        <h1>v-show和v-if的区别</h1><br>
        <button @click="toggleIsShow">改变isShow</button>
        <p  v-show="isShow">v-show</p>
        <p v-if="isShow">v-if</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
           el:"#app",
           data:{
               isShow:true
           },
           methods:{
                toggleIsShow:function(){
                this.isShow=!this.isShow;
               }
           }
       })
    </script>

</body>
</html>

运行后可以调试查看元素是否存在：
在这里插入图片描述

v-bind

设置元素的属性（比如：src,title,class等等）
完整写法v-bind:属性名，简写:属性名
需要动态增删class有两种方式：
1. :class="{class名:布尔表达式}"
2. :class="布尔表达式?'class名':'' "

程序：
利用v-bind与data区的数据进行绑定
v-bind:src="imgSrc"或:src="imgSrc"
:title="imgTitle + '哈哈' "
:class="{active:isActive}"

<div id="app">
        <!-- v-bind: 来绑定，v-bind可以省略，直接用冒号-->
        <p> v-bind:src="imgSrc"</p>
        <img v-bind:src="imgSrc" alt="" :class="isActive?'active':'' "><br>
        <p > :src="imgSrc"</p>
        <img :src="imgSrc" :title="imgTitle + '哈哈' " :class="{active:isActive}" @click="toggleActive"><br>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590846954790&di=fe3e2140ba239cfc59d924c6405d75aa&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F357d23d074c2954d568d1a6f86a5be09d190a45116e95-0jh9Pg_fw658",
                isActive: true,
                imgTitle: "我在跑步"
            },
            methods: {
                toggleActive: function () {
                   this.isActive = !this.isActive;
                }
            }
        })
    </script>