Vue之v-bind绑定样式

最新推荐文章于 2023-06-21 10:45:20 发布
最新推荐文章于 2023-06-21 10:45:20 发布
阅读量425 收藏
点赞数
分类专栏： Vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44415461/article/details/96909304
版权

v-bind:src=“imageSrc” 添加资源文件,如：图片、声音、视频等
v-bind:width == :width v-bind 的缩写 :
:class="[classA,classB]" 数组写法
:class="{classA:classOr}" 判断是否显示 classOr:true/false
:class="[classOr?classA:classB]" 三元运算

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-bind绑定扩展</title>
	<script src="js/vue.min.js"></script>
	<style>
		.classA{
			color:red;
		}
		.classB{
			font-size:200%;
		}
	</style>
</head>
<body>
	<div id="app">
		<img v-bind:src="imageSrc" :width="width">
		<hr />
		<div :class="className">绑定class样式</div>
		<div :class="[classA,classB]">绑定class样式中的数组写法</div>
		<div :class="{classA:classOr}">class样式绑定 判断</div>
		<div :class="[classOr?classA:classB]">class样式绑定 三元运算</div>
	</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
            imageSrc: 'https://cn.vuejs.org/images/logo.png',
            width: '100',
            className: 'classA',
            classA: 'classA',
            classB: 'classB',
            classOr: false
		}
	})
</script>
</html>

运行效果图：
在这里插入图片描述

Mr.ZKH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中使用v-bind绑定常见属性以及class、style的方法
m0_60266243的博客
07-26 3069
首先，v-bind的基础用法，就是用来绑定html中元素的属性。什么叫“html中元素的属性”？ 例如，img、a等等是html元素，而img中的src则是该元素的属性值。 v-bind绑定一些常用属性 如下，这样就将页面中链接的地址绑定到了“url”上，图片的地址绑定到了“imgUrl”上。 <div id="app"> <a v-bind:href="url">链接</a> <img v-bind:...
vue中使用v-bind(v-on)绑定所有元素的属性(方法)
温壁
12-29 2389
vue中使用v-bind(v-on)绑定所有元素的属性(方法)
Vue项目中动态修改元素宽高的三种方式
最新发布
06-21 9671
一般用于父组件动态变换宽高,子组件需要同步修改宽高，我这里是用在了一个ElementUi弹窗上面，当页面大小发生变化后，动态修改弹窗的大小，我试着通过deep函数修改el-dialog__body的高度，但是不好用，因为我的style上面加了scoped，但是呢，在el-dialog__body的div上却没有data的hash值绑定，所以导致样式不生效，所以要把style的scoped属性去掉才可以：具体动态修改元素宽高的方法，大概有三种方式。
Vue3.0——常用的Composition API（监听属性、生命周期、Teleport、属性、自定义事件、状态驱动的动态 CSS、注册组件、uspense、 isRef等）
qq_52301431的博客
09-20 1512
Vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期defineEmit 3.2之前useContext 废弃了，useContext函数的返回值又{emit,attr}defineEmits 3.2之后与组件和 prop 一样，事件名提供了自动的大小写转换。如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。
vue基础之v-bind属性、class和style用法分析
明月如霜丶
04-29 1251
一、属性 属性: v-bind:src="" width/height/title… 简写: :src="" 推荐 效果能出来，但是会报一个404错误 效果可以出来，不会发404请求 window.onload=function(){ new Vue({ el:'#box', data:{ url:'https:...
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
Vue v-bind动态绑定class实例方法
01-19
下面我们使用Vue的v-bind绑定class v-bind动态绑定class 对象语法绑定（常用） red和size的值为true就在class显示red和size，false就不显示。下面有两种写法： <style> .red{ color: red; } .size{ font...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中v-bind与v-model指令详解
Yo,的博客
08-26 4204
1.v-model v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。 经常和{{}}胡子语法配合在html中使用，  ps: {{}} === v-text 直接看代码 &lt;p&gt;********v-model绑定数据源，实现双向绑定&lt;/p&gt; &lt;div&gt; &lt;p&gt...
vue v-bind:class
酷酷的旭
10-28 5444
<template> <div> <h3>styleDemo</h3> <div v-bind:class="{ active: isActive }"></div> </div> </template> <script> expor...
Vue指令中 v-bind 的5种用法
eyes++的博客
05-14 1733
这里介绍了Vue语法中 v-bind 指令的5种用法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
vue v-bind 设置属性和事件
damei2017的博客
09-14 2720
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Hello V
vue指令 v-bind的特殊样式的使用
Nikki_u的博客
03-06 338
v-bind 主要用于属性绑定 1、在不使用v-bind时 样式静态效果 <div class="red">静态</div> 2、v-bind的动态写法 <div :class="redCls">动态</div> 3、v-bind的对象写法 <div :class="{ red: false, blue: false, green: fn() }">object</div> fn() { ret
vue学习笔记总结（v-bind动态绑定属性）
summer_zhh的博客
08-13 907
v-bind 1. v-bind基本使用 v-bind用于绑定数据和元素属性，可以使用:简写 <div id="app"> <img v-bind:src="imgURL" alt=""> <a v-bind:href="aHerf"></a> <!-- 语法糖写法 --> <img :src="imgURL" alt=""> <a :href="aHerf"></a> &
Vue 第三讲（v-bind 属性）
weixin_51927215的博客
05-02 561
类和样式
vue指令之v-bind
hu_Time的博客
09-18 374
vue指令 1.v-bind 绑定属性 （v-bind <==> : ） class绑定 [ ] { } style绑定 [ ] { } 缩写：":" <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串...
v-bind绑定样式
qq_38686150的博客
01-04 466
v-bind 的功能 v-bind 用于绑定一个或多个属性值 或者向另一个组件传递props值 开发标签属性的动态绑定 v-bind绑定 class // 用法一：直接绑定一个对象 <h2 :class='{'active':isAcive,...}'> </h2> // 用法 二： 和 普通的类同时存在 如果isAcive 为 true 类名会有两个 title active <h2 class=‘title’ :class='{'active':isAcive
vue(v-bind修改样式属性、自定义命令、过滤器filter)
m0_66970189的博客
06-23 1879
css代码 js代码 v-bind 使用格式 用于修改行内属性 格式： 简写：`:属性名=‘变量’ 注意： class操作类名 单独写一个变量名 只写一个的话，要写变量名 写数组 1. 数组里的数据加引号的话，就填入class名 2. 数组里面的数据不加引号，就填入变量名 对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式 v-for 补充 :key v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id 自定义指令 全局自定义命令
Vue中关于v-bind绑定样式的正确写法
06-10
Vue中关于v-bind绑定样式的正确写法是: ```html <div v-bind:class="{active: isActive}"> ``` 其中，`isActive`是一个布尔值，如果它的值为`true`，则会给该`div`元素添加一个`active`的类。如果`isActive`的值为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值