学习Vue的第五天 Vue基础精讲（使用VS code写Vue）

最新推荐文章于 2024-07-12 16:09:07 发布

BELLฅ

最新推荐文章于 2024-07-12 16:09:07 发布

阅读量763

点赞数 1

分类专栏： Vue学习笔记文章标签： vue.js 前端 javascript vscode 前端框架

本文链接：https://blog.csdn.net/weixin_45917085/article/details/122625626

版权

本文详细讲解了Vue的基础知识，包括样式绑定、条件渲染、列表渲染、set方法的使用，以及事件绑定和表单绑定。在样式绑定中，介绍了class和style的动态绑定；条件渲染部分涉及v-if、v-else-if和v-else的用法；列表渲染包括数组和对象循环；set方法用于改变对象和数组内容；事件绑定涵盖了基本事件、事件修饰符和按键修饰符；表单绑定则讲解了v-model及其修饰符的应用。

摘要由CSDN通过智能技术生成

文章目录

1.Vue中的样式绑定

1）数据绑定之实现点击文字变色，并可多次点击

（1）class对象绑定：借助class和对象来实现对样式的绑定

<head>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="{activated: isActivated}"
        >
            Hello world
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false  //默认不显示activated样式
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script>
</body>

（2）class数组绑定

<head>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="[activated, activatedOne]"
        >
            Hello world
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activated: "",  //默认变量为空
                activatedOne: "activated-one"
            },
            methods: {
                handleDivClick: function() {
                    // if (this.activated == "activated") {
                    //     this.activated = "";
                    // }else {
                    //     this.activated = "activated";
                    // } //等价于下式
                    this.activated = this.activated == "activated" ?
                        "" : "activated"
                }
            }
        })
    </script>
</body>

（3）style改变样式

<body>
    <div id="app">
    	写法一：（对象）
        <div :style="styleObj" @click="handleDivClick">
            Hello world
        </div>
        写法二：（数组法）
        <div :style="[styleObj, {fontSize: '20px'}]" @click="handleDivClick">
            Hello world
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black"
                }
            },
            methods: {
                handleDivClick: function() {
                    this.styleObj.color = this.styleObj.color == 
                    "black" ? "red" : "black";
                }
            }
        })
    </script>
</body>
</

最低0.47元/天解锁文章

BELLฅ

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习Vue的第五天 Vue基础精讲（使用VS code写Vue）

文章目录1.Vue中的样式绑定2.Vue中的条件渲染3.Vue中的列表渲染4.Vue中的set方法5.Vue中的事件绑定6.Vue中的表单绑定1.Vue中的样式绑定1）数据绑定之实现点击文字变色，并可多次点击（1）class对象绑定：借助class和对象来实现对样式的绑定<head> <style> .activated { color: red; } </style></head&g
复制链接

扫一扫