VueJS样式绑定之内联样式v-bind:style

最新推荐文章于 2024-05-31 21:19:43 发布
转载 最新推荐文章于 2024-05-31 21:19:43 发布 · 1.3k 阅读 · 0

该博客围绕VueJS展开，主要介绍了内联样式绑定v-bind:style，虽内容仅给出转自链接，但核心聚焦于VueJS此功能。
vue中如何动态绑定内联样式
子玉的博客
03-12 754
在这个示例中，我们使用计算属性 `computedStyle` 来返回一个包含动态样式的对象。通过 `:style` 指令将计算属性绑定到元素的内联样式上。你可以根据需要选择适合自己的方式来动态设置样式。在上述示例中，`myStyle` 是一个包含多个样式属性的对象，通过 `:style` 指令将该对象绑定到元素的内联样式上。在这个示例中，我们直接将一个样式对象作为 `:style` 指令的绑定值。该对象中的属性名对应样式属性，属性值为动态变量。在Vue中，你可以使用v-bind指令来动态绑定内联样式。
Vue常用指令02-v-on/v-bind/v-model/自定义指令【1小时掌握vue3系列】
方才coding
11-17 1316
Vue支持用户注册自定义的指令 (Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。// 在绑定元素的 attribute 前// 或事件监听器应用前调用// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用// 绑定元素的父组件更新前调用。
详解vue中v-bind:style效果的自定义指令
11-21
自定义指令 1.什么是自定义指令 以 v- 为前缀，然后加上自己定义好的名字组成的一个指令就是自定义指令。为什么要有自定义指令呢？在有些时候，你仍然需要对普通的DOM元素进行底层的操作，这个时候就可以用到自定义指令。 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 局部自定义指令 directives: { focus: { // 指令的
17.样式绑定之style绑定用法
code_dream_wq的博客
11-27 640
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div v-bind:style='{border: borderStyle, width: widthStyle, height: .
vue v-bind:style详解
weixin_41970780的博客
01-18 2169
vue v-bind:style详解 <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">娃哈哈，娃哈哈</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, ove
vuejs绑定class和style样式
10-20
在Vue.js中，数据绑定是核心概念之一，其中class和style的绑定是实现动态界面效果的重要方法。本文将详细介绍如何在Vue.js中绑定class和style样式。 ### Class的绑定 在HTML中，class属性用于指定元素的类名，这些...
vuejs-snippets：vuejs的样板
02-10
`<style>`则用于定义组件的样式，可以是内联样式或引用外部CSS文件。 Vue.js的片段通常包含以下关键知识点： 1. **模板语法**：Vue.js使用双大括号`{{ }}`进行数据绑定，用`v-bind`指令绑定属性，`v-on`用于事件...
<template> <div class="label-container"> <div style="border: 1px solid #d9d9d9"></div> <div class="header"> <div class="biaoqian">客户特征标签</div> <el-popover placement="right" popper-class="group-popover" width="287" trigger="click"> <div class="full-label-section"> <span>业务需求</span> <div class="full-tag-group"> <el-popover v-for="(item, index) in requireList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in requireList" v-if="!shouldShowPopover(item)" :key="index" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="full-label-section"> <span>业务特征</span> <div class="full-tag-group"> <el-popover v-for="(item, index) in featureList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in featureList" v-if="!shouldShowPopover(item)" :key="index" type="success" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="full-label-section full-label-sections"> <span>拓展任务</span> <div class="full-tag-group"> <el-popover v-for="(item, index) in taskList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="danger" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in taskList" v-if="!shouldShowPopover(item)" :key="index" type="danger" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <el-button slot="reference" class="btn">更多</el-button> </el-popover> </div> <!-- 客户特征部分标签 --> <div style="padding: 10px; background: #fafafa"> <div class="label-section"> <span>业务需求</span> <div class="tag-group"> <el-popover v-for="(item, index) in showRequireList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in showRequireList" v-if="!shouldShowPopover(item)" :key="index" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="label-section"> <span>业务特征</span> <div class="tag-group"> <el-popover v-for="(item, index) in showFeatureList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="success" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in showFeatureList" v-if="!shouldShowPopover(item)" :key="index" type="success" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="label-section"> <span>拓展任务</span> <div class="tag-group"> <el-popover v-for="(item, index) in showTaskList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="danger" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in showTaskList" v-if="!shouldShowPopover(item)" :key="index" type="danger" size="mini" >{{ item.labelName }}</el-tag> </div> </div> </div> </div> </template> <script> import { Tag, Button, Popover,Tooltip } from 'element-ui'; export default { name: 'groupLabelBox', components: { [Tag.name]: Tag, [Button.name]: Button, [Popover.name]: Popover, [Tooltip.name]: Tooltip, }, props: { requireList: { type: Array, required: true, }, featureList: { type: Array, required: true, }, taskList: { type: Array, required: true, }, }, data() { return { dialogVisible: false, }; }, computed: { showRequireList() { return this.requireList.slice(0, 2); }, showFeatureList() { return this.featureList.slice(0, 2); }, showTaskList() { return this.taskList.slice(0, 2); }, }, methods: { shouldShowPopover(item) { return item?.labelName?.length >= 7 }, }, }; </script> <style lang="less" scoped> .group-popover { padding: 30px !important; /* 标题样式 */ .full-label-section{ padding-bottom: 12px; > span { display: block; margin-bottom: 10px; width: 56px; height: 14px; font-family: PingFangSC, PingFang SC, sans-serif; font-weight: 400; font-size: 14px; color: #888888; line-height: 14px; text-align: left; font-style: normal; } } /* 标签组样式 */ .full-tag-group { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; .el-tag { margin: 0 !important; border-radius: 4px; font-size: 12px; padding: 0 8px; height: 24px; line-height: 24px; } } .full-label-sections { padding-bottom: 0 !important; } } .truncate-tag { display: inline-block; max-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; cursor: default; } .truncate-tag:hover:after { position: absolute; top: 30px; left: 10px; content: attr(data-title); color: #333333; } .grid-popover { min-width: 54px; text-align: center; padding: 10px 10px; } .label-container { position: relative; padding: 0px 14px 7px 16px; } .header { display: flex; justify-content: space-between; align-items: center; margin: 10px 0px; .biaoqian { width: 84px; height: 14px; font-family: PingFangSC, PingFang SC, sans-serif; font-weight: 400; font-size: 14px; color: #888888; line-height: 14px; text-align: left; font-style: normal; } .btn { width: 33px; height: 17px; padding: 0 4px; background: #ffffff; border-radius: 2px; border: 1px solid #cbcbcb; font-weight: 400; font-size: 12px; color: #333333; line-height: 17px; font-style: normal; > span { display: block; width: fit-content; } } } .label-section { > span { display: block; margin-bottom: 5px; width: 48px; height: 14px; font-family: PingFangSC, PingFang SC, sans-serif; font-weight: 400; font-size: 12px; color: #333333; line-height: 14px; text-align: left; font-style: normal; } } .tag-group { display: flex; gap: 10px; flex-wrap: wrap; } .label-section:not(:last-child) { margin-bottom: 10px; } </style> 优化这段代码
最新发布
07-13
避免内联函数（尤其是在事件处理中，使用methods定义函数并绑定） 7. 样式优化（避免深选择器，使用scoped样式，避免全局样式污染） 8. 按需引入Element UI组件（使用babel-plugin-component） 9. 使用Vuex的...
Vue：Class 与 Style 绑定
ChinaDragon10的博客
05-31 1188
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
Vue绑定内联样式
明月如霜丶
10-17 856
使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;示例&lt;/title&gt; &lt;/head&
vue项目中绑定内联样式
chenlim87的博客
10-13 426
vue项目中绑定动态内联样式，如果想用三元表达式要用中括号
vue ---------- v-bind 绑定style
m0_54882260的博客
02-11 129
绑定style <div v-bind:style="styleObject">绑定样式对象</div>' <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) --> <div v-bind:style="{ color: activeColor, fontSize: ...
Vue v-bind绑定style
weixin_44289916的博客
11-13 331
v-bind绑定style 绑定方式一：对象语法 ：style="{color: current,fontSize: fontSize + 'px'}" style 后面跟的是一个对象类型 对象的key是css属性 对象的value是具体赋的值，值可以来自data中的属性 绑定方式二：数组语法 <div v-bind:style="[baseStyle, overridin...
VUE 学习之 绑定内联样式
liubangbo的专栏
03-02 301
&lt;div id="app"&gt; &lt;input :style="inputStyle" style="color: red"&gt; &lt;/div&gt; script src="./vue.js"&gt;&lt;/script&gt; &lt;script&gt; let vue = new Vu
Vue-关于内联样式style绑定
qq_44859912的博客
11-12 3113
原本准备把style绑定和class绑定写在一起的，但我还是分开了，对class绑定不太清楚的伙伴也可以先去看看上篇Vue-关于class绑定（基础学习）_绍昆ya的博客-优快云博客 关于内联样式style的绑定和class名的绑定有些一样，也分为对象语法和数组语法，具体我们往下看。 首先我们先看对象语法 对象语法： v-bind:style的对象语法十分直观——看起来=很像 CSS，但其实是一个 JavaScript 对象。 我们来看看原本内联...
vue给标签绑定内联样式
weixin_41201496的博客
03-05 582
html代码 直接在行内使用v-bind写入一个对象，属性名如果有 - 字符，必须用引号括起来 <h1 :style="styleObj1">我是一个字符串</h1> 在style中传入一个数组,数组中传入多个对象 <h1 :style="[styleObj1, styleObj2]">我是一个字符串</h1> js代码 <!--导入vu...
Vue v-bind动态绑定style
qq_52359462的博客
04-02 607
1.v-bind 一般简写为: <div id="app"> <ul> <li v-for='(item,i) in text' :style ="{background:'red'}">索引值：{{i}} 内容：{{item}}</li> </ul> <h2 :style="{background:color}">我是蓝色背景</h2>
1、做一个表单，含有若干表单元素，如下拉框、文本框之类。 2、使用v-modal绑定数据。 3、使用v-bind:class和v-bind:style绑定样式。
10-12
1. 要创建一个包含下拉框和文本框等表单元素的Vue组件，首先你需要在HTML模板部分设置基础结构，比如使用`<form>`标签包裹所有表单元素： ```html <template> <div> <form @submit.prevent="handleFormSubmit"> <!-- 下拉框示例 --> <select v-model="selectedOption" @change="optionChanged"> <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option> </select> <!-- 文本框示例 --> <input type="text" v-model="username" placeholder="请输入用户名"> <!-- 其他表单元素... --> <button type="submit">提交</button> </form> </div> </template> ``` 2. 对于`v-modal`的使用，通常配合`vuetify`这样的UI库，你可以设置一个布尔变量来控制模态框的显示与隐藏，并在需要的地方打开它： ```html <template> <v-dialog v-model="showModal" max-width="500px"> <!-- 模态内容 --> </v-dialog> </template> <script> export default { data() { return { showModal: false, // ...其他数据... }; }, methods: { handleModalShow() { this.showModal = true; }, // ...其他方法... } } </script> ``` 3. 使用`v-bind:class`和`v-bind:style`可以动态地给元素添加或改变CSS类名和内联样式。例如： ```html <div :class="{ active: isActive }" :style="{ backgroundColor: selectedColor }"></div> ``` 这里的`:class="{ active: isActive }"`会在`isActive`属性变化时切换类名，`:style="{ backgroundColor: selectedColor }"`会根据`selectedColor`的数据值设置背景色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值