在vue中怎么写行内样式高_vue v-bind绑定行内样式

使用 v-bind 指令去绑定行内样式，即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式。

style中直接定义样式

下面实例中我们将直接在 v-bind:style 属性中定义样式，实例如下：html>

学习 VUE 框架

.normal {font-size: 18px; font-weight:bold;}

.active {color: #26b955;}

.under-line {border-bottom: solid 3px red;}

内联样式

var vm = new Vue({

el: '#app',

data: {

activeColor: 'red',

fontSize: 16

}

});

上例中，v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" 语句其实定义了一个对象，该对象中定义了元素的字体颜色和字体大小。而字体颜色和大小的值从 vue 对象的 data 中动态获取。

style引用vue定义的数据对象

下面实例将演示在 v-bind:style 中引用在 vue 对象 data 中定义的 styleObject 对象。代码如下：html>

学习 VUE 框架

.normal {font-size: 18px; font-weight:bold;}

.active {color: #26b955;}

.under-line {border-bottom: solid 3px red;}

直接绑定到一个样式对象通常更好

var vm = new Vue({

el: '#app',

data: {

styleObject: {

color: 'blue',

fontSize: '12px'

}

});

style用数组引用多个对象

下面实例演示在 v-bind:style 中使用数组的形式引用多个对象，代码如下：html>

学习 VUE 框架

.normal {font-size: 18px; font-weight:bold;}

.active {color: #26b955;}

.under-line {border-bottom: solid 3px red;}

数组语法可以将多个样式对象应用到同一个元素上

var vm = new Vue({

el: '#app',

data: {

styleObject: {

color: 'blue',

fontSize: '12px'

styleObject2: {

fontWeight: 'bold',

border: 'solid 1px red'

}

});

在vue中怎么写行内样式高_vue v-bind绑定行内样式相关推荐

vue中手写一个放大镜功能
vue中手写一个放大镜功能有的时候需要对图片进行放大,类似于电商的商品放大功能,于是在这个想法上写了一个放大镜的功能,并且在放大镜的基础上新添加了一些小功能,下面开始吧! 放大镜是封装的组件的形式, ...
vue中，获取一个div的高赋值给另一个div （自适应）
vue中,获取一个div的高赋值给另一个div (自适应) 问题描述: 左侧是video 为了让video不出现黑边 video是16:9的(怎么写成16:9的盒子下次说), 左侧的高度会随着页面宽 ...
Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一测试二测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
在vue中怎么写行内样式高_说说在 Vue.js 中如何绑定样式（class 或 style）
在数据绑定中,最常见就是动态绑定元素的 class 或内联样式 style 咯,它们也是 HTML 的属性,所以可以使用 v-bind 指令 . 1 绑定 class 1.1 对象语法使用 v-bi ...
vue中v-for写在template上，不能加key怎么办
v-for写在非template上,添加:key没有任何问题,但是写在template上就不行了,加了就报错.有些时候由于内容过多,不得不写在上面,以下是解决方法: <template v-fo ...
vue中v-for写在template上，加key提示错误
v-for写在非template上,添加:key没有任何问题,但是写在template上就不行了,加了就报错. '<template>' cannot be keyed. Place th ...

在vue中怎么写行内样式高_vue v-bind绑定行内样式

在vue中怎么写行内样式高_vue v-bind绑定行内样式相关推荐

最新文章

热门文章