前端UI框架——VueAPI使用之Class 与 Style 绑定

最新推荐文章于 2024-07-24 10:10:12 发布
最新推荐文章于 2024-07-24 10:10:12 发布
阅读量149 收藏
点赞数

一、基本介绍

1、绑定 HTML Class 
字符串语法 
对象语法 
数组语法 
2、绑定内联样式——Style 
对象语法

二、代码示例：

1、class(字符串)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class(字符串)</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<!--Class 与 Style 绑定
1、绑定 HTML Class
        字符串
        数组
        对象
2、绑定内联样式
        v-bind:style
-->
<body>
    <div id="app">
       <div class="juzhong " :class="msg">

       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:"test"
        }
    })

    var flag = true;
    setInterval(()=>{
        if(flag){
            vm.msg="test2";
        }else {
            vm.msg="test";
        }
        flag =!flag;
    },1000)

</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

2、class(数组)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<body>
    <div id="app">
       <div  :class="[juzhong,test]" >

       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            // msg:["juzhong","test"]
            juzhong:"juzhong",
            test:"test2"
        }
    })



</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

3、class(对象)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<body>
    <div id="app">
       <div  :class="msg" >

       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:{
                test:false,
                test2:true,
                juzhong:true
            }

        }
    })

    setInterval(()=>{
        vm.msg.test = !vm.msg.test;
        vm.msg.test2 = !vm.msg.test2;
    },1000)


</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

4、style(对象)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<body>
    <div id="app">
       <div  :class="msg" :style="msg1">
            我是一个div
       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const color = "white";
    const vm = new Vue({
        el:"#app",
        data:{
            msg:{
                test:false,
                test2:true,
                juzhong:true
            },
            msg1:{
                'text-align': 'center',
                color: color,
                'line-height': '200px'
            }
        }
    })


    setInterval(()=>{
        vm.msg.test = !vm.msg.test;
        vm.msg.test2 = !vm.msg.test2;
    },1000)


</script>
</html>
xingye123_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 vue-class-setup 编写 class 风格组合式API，支持Vue2和Vue3
lzxb4的博客
09-23 1256
我司基于vue-class-component开发的项目有上百个，其中部署的 SSR 服务也接近100个，如此庞大体量的项目一开始的时候还幻想着看看是否要升级Vue3，结果调研一番下来，才发现vue-class-component对Vue3的支持，最后一个版本发布都过去两年了，迟迟还没有发布正式版本。目前基本上处于无人维护的状态，而且升级存在着大量的破坏性更新，对于未来是否还要继续使用Vue3现在还是持保留意见，但是不妨碍我们先把组件库做成Vue2和Vue3通用，于是就有了本文。
Vue3 笔记 指令 选项api class类与style样式
海胆的博客
07-15 1004
Vue 的核心是 声明式渲染 声明式的特点在于 通过改变声明来决定样式，而不是直接去操作 dom 改变 vue通过mount挂载，将声明的数据与dom联系起来，并实现响应式变化（一处变化同步变化） Vue 提供了一些特殊的响应式 v-bind: 绑定属性attribute 简写’:’ 让该属性与声明的数据保持一致 v-on: 对事件监听 创建Vue应用的对象参数 Vue.createapp({}) { data() { return { xxx: xxx, xxxx: xx }
前端笔试全攻略：30道经典面试题详解
最新发布
qq_42072014的博客
07-24 2101
解答：CSS盒模型描述了元素在网页上的布局方式。每个HTML元素都可以视为一个矩形盒子，这个盒子由四个部分组成：content（内容区）、padding（内边距）、border（边框）和margin（外边距）。在标准盒模型中，元素的总宽度等于content + padding + border + margin；而在IE盒模型中，元素的总宽度等于content + border + padding。解答：闭包是在JavaScript中一种特殊的作用域现象。
vue中局部注册组件的用法(typescript class api用法)
只想买把蝴蝶knife
03-30 680
这几天在使用vue的过程中发现导入了一个组件但是总是报错，后来发现是没有在使用组件的时候进行注册， 如 import SIdentify from './components/SIdentify' 本来在js中是如此使用的 export default { name: 'App', components: { vueImgVerify, } } 在typescript class api中应该这样使用 @Component({ components: { Header
uni-app动态绑定class和style
qq_36904182的博客
06-16 1405
目录动态绑定calss动态绑定style 动态绑定calss class="[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]" 为不同条件的image绑定不同的样式 <image class="img1" :class="[{'img1':index == 0},{'img2':index == 1},{'img3':index == 2}]" :src="avtUrl" > </image> 数组的方式，直接绑定多个 c
Vue3+Ts+Less 开发的前端UI框架.zip
06-08
Vue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架....
uivue前端UI框架基于vue2开发
08-12
UIVue是一个专为Vue2构建的前端用户界面框架，旨在提供一套完整、高效且易于使用的组件库，帮助开发者快速构建现代化的Web应用程序。这个框架充分利用了Vue2的强大功能，如虚拟DOM、响应式数据绑定、组件化以及插件...
12个常用前端UI框架集合汇总
10-15
在现代前端开发领域，用户界面（UI）框架的使用已经成为提升开发效率和项目质量的重要手段。本文针对目前流行的12个前端UI框架进行了汇总，并对其特点和应用场景进行了简要介绍，帮助开发人员根据项目需求选择合适的...
文章：前端框架——Vue中所需要的静态资源.rar
12-23
在“文章：前端框架——Vue中所需要的静态资源.rar”这个压缩包中，很可能是为了配合介绍Vue.js开发时所需的静态资源，包括但不限于HTML模板、CSS样式文件、JavaScript代码、图片以及其他辅助开发的工具或库。...
2022前端面试系列——Vue面试题.pdf
12-14
本文总结了Vue面试题中的知识点，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP的区别等内容。 1. Vue的基本原理 Vue实例的创建过程中，Vue会遍历data中的属性，并使用Object.defineProperty()或Proxy...
vue修改UI框架样式 样式穿透
qq_43542074的博客
08-01 1825
vue 修改ui框架样式 样式穿透 组件内的结构如下： <template> <div class="box"> <Input class="input-test" type="text" /> <Input type="text" /> </div> </template> ...
2024前端面试题！（附答案及解析）（2024.8月最新版）
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 14万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.8月最新版）感谢支持，你们的鼓励是我的动力！
常见的前端面试题【90道】
qq_50294652的博客
06-08 2万+
1、vue的基本原理2、说说你对盒子模型的理解？3、说说javascript都有哪些数据类型，如何存储的？4、如何理解响应式，实现响应式的方法有哪些？有什么区别？5、Css性能优化有哪些常见的方法？具体如何实现？6、判断数据类型的方法有哪些？有什么区别？7、说说你对事件循环的理解？8、说说你对BOM的理解，BOM的核心都有哪些？作用是什么9、Bind,call,apply有什么区别？如何实现一个bind方法？10、如何理解闭包？闭包的应用场景是？11、说说你对同步和异步的区别的理解？
前端面试题汇总大全（含答案）-- 持续更新
热门推荐
张兴华的博客
08-07 18万+
汇总了一些前端常见的面试题。 一、HTML 篇 1. 简述一下你对 HTML 语义化的理解？ 用正确的标签做正确的事情。 html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO; 使阅读源代码的人对网站更容易将网站...
前端经典面试题 30道
任磊
05-13 1万+
题 1 ：什么是防抖和节流？有什么区别？如何实现？ 防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 思路：每次触发事件时都取消之前的延时调用方法 节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率 思路：每次触发事件时都判断当前是否有等待执行的延时函数 题 2 ：get请求传参长度的误区、get和post请求在缓存方面的区别 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。 实际.
分享 100 道基础的前端面试题（附答案）
前端达人
04-13 3万+
最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题，本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 JavaScript 的可以来一次全方位的检漏和排查，感谢 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！附笔记链接...
前端300道常见面试题，前端找工作必备
weixin_43474701的博客
12-15 1万+
前端面试题汇总 一、HTML 和 CSS 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident 内核Firefox：gecko 内核Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发) 2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 声明位
前端全模块常见面试题与答案详解
weixin_55181759的博客
10-29 1万+
???? 作者主页：????仙女不下凡???? ???? 前言介绍：以下???? 内容都是我个人对于前端面试题的一些总结，一部分是我自己自学时整理的资料，但是也不乏参考其他博主的博文连接，如有侵权请联系我，另外该文章也会定期更新欢迎持续关注！ ???? 欢迎点赞???? 收藏⭐ 留言???? 如有不足与错误敬请指正！ ????一、HTML与CSS部分 1.HTML盒模型 2.行元素与块元素区别 3.flex弹性布局 4.h5新特征 5.css3新特征 6.px、em与rem区别 7.清除浮动 8.垂直居中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值