如何动态的绑定style在vue中

最新推荐文章于 2024-04-18 15:01:57 发布
最新推荐文章于 2024-04-18 15:01:57 发布
阅读量960 收藏
点赞数
分类专栏： vue css 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41163341/article/details/111591910
版权
vue 同时被 2 个专栏收录
29 篇文章 0 订阅
订阅专栏
css
14 篇文章 0 订阅
订阅专栏 
 :style="{
              top: item.top + 'px',
              left: item.left + 'px',
              transform: item.deg,
            }"

要点：注意绑定的是一个对象，在我们使用到css一写特有写法时，要注意到这一个问题。列如：使用transform属性，动态绑定一个旋转角度，则我们需要写成这样的格式：
{
type: ‘red’,
id: 0,
left: 81,
top: 162,
deg: ‘rotate(-45deg)’
},
通过deg去实现动态绑定，而不是:style="{ top: item.top + 'px', left: item.left + 'px', transform:rotate（item.deg+'deg'） }"

oldfour_0830_9674
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 绑定动态内联样式transform:rotate() 报错
weixin_63712639的博客
01-09 3276
原因: v-bind 或者 ‘:’ 后面是写的js代码，是用键值对形式写的，键是标签的css样式属性名，键就是属性值，键值必须是字符串，用变量也可以(前提是必须先在data里声明变量) :style="{transform:rotate()} 这个写法浏览器把rotate当成函数rotate()调用的,所以会报错 解决: //字符串模式 :style="{transform: ‘ rotate(60deg)’} //变量形式 :style="{transform: ` rotat...
vue组件传值修改伪元素css，动态样式绑定
m0_50663823的博客
09-26 1138
vue组件传值修改伪元素css，动态样式绑定
vue动态class/style
最新发布
u010609022的专栏
04-18 2325
通过v-bind:style指令，可以实现根据数据的变化动态改变元素的样式，包括颜色、大小、位置等。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过v-bind:style数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。可以是变量、对象属性或直接的类名字符串。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
Vue-Class 与 Style 绑定(金丹初期)
LuckFairyLuckBaby的博客
09-10 383
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class...
【vue其他相关】用transform属性做个区域（组件）切换的效果
庞囧的博客
06-18 493
文章目录效果代码 效果 颜色小方块可以是个大组件，比如图表之类的，抛个砖~ 代码 用transform属性，能很好的节省性能。 <template> <main class="wrap"> <div class="item" style="transform: translate(-200%, 0%) scale(0.33)" @click="changeShowItemClick(0)"></div> <div
使用vue中Transition组件中的坑
melissaomy的博客
12-28 204
使用vue中Transition组件中的坑
vue拖拽窗口
ZuoZuoDangerou的博客
06-24 867
vue拖拽窗口简单实现 效果 实现代码 <template> <transition> <!-- 绑定style中top和left--> <div class="moveBox" :style="position" v-show="show"> <div class="moveHead" @mousedown="mousedown" @mousemove="mouse
vue 中动态绑定class 和 style的方法代码详解
08-27
主要介绍了vue 中动态绑定class 和 style的方法，通过实例结合的形式给大家接受的非常详细，需要的朋友参考下吧
vue 动态绑定背景图片的方法
10-18
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
vue动态生成dom并且自动绑定事件
01-19
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model...
Vue.js样式动态绑定实现小结
01-21
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结： 动态切换的核心思想： 利用vue指令v-bind来实现动态...
模板插槽使用 vue3
grow_的博客
12-29 106
插槽模板使用
Vue学习（2）-Vue模板语法
一个人的江湖
11-09 1759
创建测试项目 1. 插值操作 1.1 Mustache 1.2 v-once 但是，在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个Vue的指令v-once。 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的) 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。 1.3 v-html 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码，如果我们直接通过{{}}来输出，会将HTML代码也一起输出，但是我们可能希望的
Vue :style表达式
一碗清深的博客
07-12 2309
style表达式
VUE教程04 动画效果实现
zhangxm_qz的博客
05-05 254
文章目录单元素动画效果多元素动画效果通过JS钩子实现动画配合Velocity实现过渡动画自定义样式动画配合Animate实现过渡动画transition-group 单元素动画效果 给Vue控制的元素添加过渡动画 将需要执行动画的html元素放到transition元素中 定义好.v-enter .v-enter-active .v-enter-to .v-leave .v-leave-active .v-leave-to 样式。transition组件中的元素显示时会自动查找.v-enter/.v-e
【实战中经常用到】vue中动态样式style和class总结
m0_67066313的博客
09-22 277
vue中style、class动态样式的运用能够让代码样式更加灵活
vue：知识点2 自定义指令
jieweiwujie的博客
10-02 119
<template> <div id="page"> <div class="move-box" v-move >左自定义指令{{demo}}</span></div> </div> </template> <script> export default { name: "pageDirective", ...
vue class和style的动态绑定举例
小哈力----一个小前端工程师
04-16 647
vue class和style的动态绑定举例 文章目录vue class和style的动态绑定举例概述class的绑定对象语法数组语法style的绑定对象语法数组语法完整demo官网链接 概述 此文章依据官网进行自我整理总结，便于工作中进行直接代码复用。 class的绑定 对象语法 可以用于通过变量来控制class添加与否 <div :class="{active: isActive,‘bigFz’:isBigFz}"> isActive 为true时添加 数组语法 可以用于添加多个动态clas
Vue中给style绑定动态值
热门推荐
qq_36811160的博客
09-22 1万+
以绑定style高度为例，高度为当前屏幕的高度 1、定义style <div :style="{width: '100%',height: screenHeight,border: '1px solid rebeccapurple', color: 'red', display: 'flex'}"> </div> 2、获取屏幕的高度 在computed属性中获取屏幕的高度 computed: { screenWidth: function () {
vue中动态绑定style
03-30
在Vue中，可以使用动态绑定style来实现样式的动态变化。动态绑定style可以通过以下几种方式实现： 1. 对象语法： 可以通过在data中定义一个对象，然后将该对象绑定到元素的style属性上。对象的属性名为CSS属性，属性值为对应的样式值。当对象中的属性值发生变化时，元素的样式也会相应地更新。 示例代码： ```html <template> <div :style="styleObject"></div> </template> <script> export default { data() { return { styleObject: { color: 'red', fontSize: '20px' } } } } </script> ``` 2. 数组语法： 可以通过在data中定义一个数组，然后将该数组绑定到元素的style属性上。数组中的每个元素都是一个对象，对象的属性名为CSS属性，属性值为对应的样式值。当数组中的元素发生变化时，元素的样式也会相应地更新。 示例代码： ```html <template> <div :style="styleArray"></div> </template> <script> export default { data() { return { styleArray: [ { color: 'red' }, { fontSize: '20px' } ] } } } </script> ``` 3. 绑定计算属性： 可以通过定义一个计算属性来返回一个样式对象，然后将该计算属性绑定到元素的style属性上。当计算属性的返回值发生变化时，元素的样式也会相应地更新。 示例代码： ```html <template> <div :style="computedStyle"></div> </template> <script> export default { data() { return { color: 'red', fontSize: '20px' } }, computed: { computedStyle() { return { color: this.color, fontSize: this.fontSize } } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值