Vue基础（Vue中使用css样式、模板语法、常用指令、事件处理）

最新推荐文章于 2024-05-11 14:48:12 发布

ZHANGJIN9546

最新推荐文章于 2024-05-11 14:48:12 发布

阅读量1.3k

点赞数 2

分类专栏：笔记文章标签： Vue基础（Vue中使用css样式、模板语法、常用指令、事件处理）

本文链接：https://blog.csdn.net/ZHANGJIN9546/article/details/96198371

版权

1、在Vue中使用CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
        [v-cloak]{
            display: none;
        }
        .box{width: 100px;height: 100px;background: #ff0000}
        .fontSize{color: #FFFFFF;size: 20px}
    </style>
</head>
<body>

<div id="app" v-cloak>
    <div :class="{box:isShow,fontSize:true}">对象写法</div>
    <button type="button" @click="isShow=!isShow">显示/隐藏</button>

    <div :class="['box','fontSize']">数组的写法</div>

    <div :style="{width:'100px',height:'100px',backgroundColor:'#00ff00'}">内联样式</div>

    <div v-bind:style="[boxStyle, fontStyle]">内联数组对象写法</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        //data方法，为了避免出现相互引用的问题，我们要用方法来初始化数据形成一个作用域，防止各个组件互相引用
        data(){
            return{
                isShow:true,
                boxStyle:{
                    width:'100px',
                    height:'100px',
                    backgroundColor:

最低0.47元/天解锁文章

ZHANGJIN9546

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（Vue中使用css样式、模板语法、常用指令、事件处理）

1、在Vue中使用CSS样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS样式</title> <style> /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一...
复制链接

扫一扫