Vue的基本组件2(show,bind)

GeekLiHua

发布于 2025-01-21 12:23:15

10100

代码可运行

文章被收录于专栏：Java

运行总次数：0

代码可运行

简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-show,v-bind。

v-show

简介：v-show用来控制标签是显示还是隐藏 学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-show="true">Vue欢迎您！</h2>
        <!-- 对于show中显示的变量isVisible如果为true那么就显示文本中的内容，如果为false就不现实 -->
        <h2 v-show="isVisible">这是被控制显示的文本！</h2>
        <input type="button" value="显示隐藏按钮" @click="showmessage">
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
                data:{
                    isVisible:false
                },
                methods:{
                    showmessage(){
                    this.isVisible = !this.isVisible
                }
            }
        });
    </script>
</html>

v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性。

学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <img v-bind:src="imagename" v-bind:alt="title" v-bind:width="width" v-bind:height="height">
    </div>
</body>
    <script>
        const app = new Vue({
        el:"#app",
        data:{
            title:"这是一张5g图片",
            imagename:"../01_初始Vue/images/5g.png",
            width:150,
            height:150
        },
        methods:{
        }
        });
    </script>

</html>

简化代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <img :src="imagename" v-bind:alt="title" v-bind:width="width" v-bind:height="height">
    </div>
</body>
    <script>
        const app = new Vue({
        el:"#app",
        data:{
            title:"这是一张5g图片",
            imagename:"../01_初始Vue/images/5g.png",
            width:150,
            height:150
        },
        methods:{
        }
        });
    </script>

</html>

运行结果：