首页 > 其他分享 >零基础入门Vue之皇帝的新衣——样式绑定

零基础入门Vue之皇帝的新衣——样式绑定

时间:2024-02-03 23:00:55浏览次数:23  
标签:Vue 500px 绑定 height 语法 新衣 样式 color

回顾

大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上,并且仅需要修改变量,页面就会跟着实时改变

但如果对于已经熟悉前端的人来说,单单有数据还是不太行,还需要css对数据进行样式的修饰,让页面更加好看

所本篇将记录记录 Class 与 Style 绑定 的学习

总所周知,想要给DOM增加元素有两种方式,一种采用class选中,一种是直接内联样式绑定


绑定HTML Class

Vue对于绑定Class提供了两种语法:


请务必准备好以下css样式,并且能在HTML中索引到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
        }

        .style3{
            background-color: pink;
            line-height: 500px;
        }
    </style>
</head>
<body>
    <div class="">Hello world</div>
</body>
<script>
    
</script>
</html>

如果按照正常写法,也可以直接这么做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
            line-height: 500px;
        }

        .style3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="root" :class="className">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
          className:"style1"
        }
    })
</script>
</html>

那么接下来,正文开始.....


对象语法

在对象语法中,可以在data里面,配置一个key为style名称,值为Boolean的对象,当使用v-bind绑定class时。

class可以是上面说的创建的对象,如果那个key的value为true,那么该样式就是启用的,反之不启用

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
            line-height: 500px;
        }

        .style3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="root" :class="classObj">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            classObj:{ //该对象的key可以为class的样式名称
                style1:true, //开启字体水平居中 字体放大
                style2:false, //关闭字体颜色 div高度 垂直居中
                style3:true,  //开启背景颜色 
            }
        }
    })
</script>
</html>

数组语法

ps:刚还没,等我有时间更新.....

标签:Vue,500px,绑定,height,语法,新衣,样式,color
From: https://www.cnblogs.com/Star-Vik/p/18005357

相关文章

  • Vue入门
     CDN引入vuevue常用指令v-for 循环渲染语法:v-for="(item,index)initems"items:遍历的数组item:遍历出来的元素index:索引下标v-bind 动态绑定作用:为空间动态绑定属性值,href,css,etc语法:v-bind:属性名=“属性值”简化::属性名=“属性值” v-if   v-sho......
  • 轻松掌握Vue:一键导出PDF和Word文档的秘诀!
    适用业务需求:将当前页面显示内容导出pdf或者word文件实现思路:先将显示内容转成图片base64地址,再生成相应文件注意:显示内容直接转图片慎用::before、::after这些css,svg图标,不然可能出现生成的图片样式丢失问题,如果确实需要显示svg图标的话目前做法是转成png显示,如有更好方法,欢迎补充......
  • vue2.x的项目运行问题(export,set)
    Windows系统修改package.json文件:"scripts":{"serve":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-serviceserve","build":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-s......
  • vue实现v-html渲染的图片预览
    在v-html属性标签的标签上添加getImg方法<divclass="content"v-html="content"@click="getImg($event)"></div>getImg方法,通过$event可获取用户当前点击的元素相应的内容,这里可以获取所点击图片对应的src。判断拿到src后,添加图片的预览效果就可以了//点击查看图片co......
  • 如何运行vue项目
    如何运行vue项目1、首先,将项目里的“node_modules”文件夹删除,这是vue项目的依赖包。因为“node_modules”文件夹太大,一般不会打包上传到svn、git上的,所以没有这个文件夹就不用删。2、删除package-lock.json。package-lock.json记录了整个node_moudles文件夹的树状结构,还记录......
  • Vue中v-model的原理
    在Vue中,v-model是一个非常强大且常用的指令,它能够让我们轻松地处理表单输入和应用状态之间的双向绑定。它不仅简化了代码编写的过程,还提供了一种高效的方式来管理表单数据。理解v-model的原理对于构建复杂的Vue应用来说是非常重要的。在本文中,我们将深入探讨v-model的实现原理,并通......
  • 在Vue中如何动态绑定class和style属性
    在Vue中,动态绑定class和style属性是我们经常遇到的需求。这个功能允许我们根据不同的条件来动态改变元素的样式,让我们的应用更加灵活和富有交互性。在本篇博客文章中,我将带你深入探索在Vue中如何实现这一功能。首先,让我们了解一下Vue中的class绑定。Vue提供了一种简洁而强大的语法......
  • 尤雨溪说:为什么Vue3 中应该使用 Ref 而不是 Reactive?
    每次有同学学习到 vue3 的时候,总会问:“ref 和 reactive 我们应该用哪个呢?”我告诉他:“我们应该使用 ref,而不是 reactive”。那么此时同学就会有疑惑:“为什么呢?ref 还需要 .value 处理,reactive 看起来会更加简单呢?”嗯....每当这个时候,我都需要进行一次长篇大论来解释......
  • (12)动态生成菜单及绑定自定义事件
    varAddCollctMenus:ArrayOfTMenuItem;//动态菜单      procedureTForm1.Button5Click(Sender:TObject);Vari,AddCollctMenuCount:Integer;BeginAddCollctMenuCount:=Length(AddCollctMenus)-1;Fori:=0ToAddCollctMenuCountDo......
  • vue学习(二) 路由器
    1.路由rounter的创建步骤1.主页面区分导航区、展示区,导航区不同的链接点击,展示区展示不同的组件内容。2.创建路由器,主要是设置路由模式和路由表(路径和组件对应关系)。3.编写不同组件用于展示区不同的展示内容,vue文件。2.一个简单的demo2.1在App.vue中创建导航区和展示区<......