Vue指令与事件

最新推荐文章于 2024-04-21 18:51:25 发布

zicl

最新推荐文章于 2024-04-21 18:51:25 发布

阅读量184

点赞数

分类专栏： Vue.js 文章标签： vue html

本文链接：https://blog.csdn.net/weixin_48430685/article/details/109339696

版权

Vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.指令

<!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>2-2指令</title>
</head>

<body>
    <div id="app">
        <p v-if="show">显示这段文字</p>
        <!-- 语法糖 v-bind 缩写 ： 和 v-on 缩写 @ -->
        <button v-on:click="handleClose">点击隐藏/显示 这段文字</button>
        <!-- 内联式 -->
        <button v-on:click="show = !show">点击隐藏/显示 内联式</button>
        <!-- 内联式 -->
        <!-- 事件 -->
        <a v-bind:href="url">链接</a>
        <img v-bind:src="imgUrl" alt="" style="width: 200px; height: 200px" />
        <!-- 事件 -->
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show: true, // 不显示 false
                url: 'https://www.hujinya.com',
                imgUrl: 'http://hujinya.com/images/glide-01.jpg'
            },

            methods: {
                // 可读性和维护性
                handleClose: function() {
                    this.close();
                },
                close: function() {
                        this.show = !this.show; // false
                    }
                    // 一般
                    /* handleClose: function() {
                         this.show = !this.show; 
                    } */
            }
        })
    </script>
</body>

</html>