Vue—v-if+v-show+v-bind的使用

78 阅读 0 评论 52 点赞

我是靠谱客的博主隐形小霸王，最近开发中收集的这篇文章主要介绍Vue—v-if+v-show+v-bind的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue事件绑定</title>
</head>
<body>

<div id="app">
<!--    v-show作用：用来控制页面中标签元素是否展示，底层通过控制元素的display属性来进行标签的显示和不显示来控制-->
<!--    v-show作用：用来控制页面中标签元素是否展示，底层通过控制对DOM树节点添加和删除来进行控制标签的显示和不显示-->
<!--    v-bind作用：用来给页面中标签元素绑定相应的属性-->
    <h1 v-show="true">v-show1设置为显示</h1>
    <h1 v-show="false">v-show1设置不为显示</h1>
    <h1 v-show="wx">v-show2设置为不显示</h1>
    <h2 v-if="true">xiaowen很单纯</h2>

    <input type="button" value="点我显示隐藏标签" @click="showHide">
    <hr>
    <img width="300px" title="小浣熊" v-bind:src="src">
    <input type="button" value="点我改变图片" @click="changesrc('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607687795628&di=cc20ad07fbd4eb51a9dfccd63773a918&imgtype=0&src=http%3A%2F%2Fa00639y.demo.guanwangyun.com%2Fstatic%2Fupload%2Fa00639y%2Falbum%2F20161220151642_57285.jpg')">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"你好",
            age:1,
            wx:false,
            src:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=444497446,2189364895&fm=26&gp=0.jpg"
        },
        methods:{   //methods，定义vue事件
            showHide(){
                this.wx=!this.wx;
            },
            changesrc(src){
                this.src=src;

            }

        }
    })
</script>
</body>
</html>