vue :class 动态绑定样式_Notes04vbind动态绑定class

2024-04-02 09:43:04

点击二白夫人

不许错过我

v-bind动态绑定class

••••

操作软件:Webstorm

插件：vue.js //从官网下载https://cn.vuejs.org/v2/guide/installation.html

v-bind

作用：动态绑定属性

缩写(语法糖)：：

例如

等同于

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

1、v-bind的基本使用

/span>html>lang="en">charset="UTF-8">Title

id="app">{{message}}v-bind:src="imgURL" alt="">v-bind:href="aHref">百度href="http://www.baidu.com">百度一下

2、v-bind动态绑定class(对象语法)

语法格式：

>

//动态绑定写法 { }大括号里面的内容表示对象变量放在data：{} 里面写了

{{message}}

/span>html>lang="en">charset="UTF-8">Title.active {       color: red     }

id="app">

`v-bind:class = "{active:isActive,line: isLine}">{{message}}`

v-on:click="btnClick">按钮

注明： =！表示取反符号

代码解释：这里的类名1和类名2分别是active和line，变量是isAcitve和isLine，isAcitve和isLine的值放在data里面实现。

(点击按钮字体颜色会转换)

也可以把

{{message}}

换成

{{message}}

就需要在后面调用一个getClass方法(写在methods里面)

getClasses: function () {return {active:this.isActive,line: this.isLine} }

3、v-bind动态绑定class(数组语法)

用得比较少

数组用[ ]

/span>html>lang="en">charset="UTF-8">

id="app">

`v-bind:class="[active, line]">{{message}}`

`v-bind:class="getClasses()">`

小总结：

v-bind用于绑定一个或多个属性值；v-bind绑定class(类)有两种形式：1、对象形式，用{ };2、数组形式，用[ ]；数组形式用的比较少，不灵活。

vue :class 动态绑定样式_Notes04vbind动态绑定class相关推荐

vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
【前端】vue.js实现按钮的动态绑定
vue.js实现按钮的动态绑定实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head><title>按钮绑定< ...
Vue教程(八)v-bind指令动态绑定
Vue教程(八)v-bind指令动态绑定 v-bind动态绑定 <!DOCTYPE html> <html lang="en"> <head>& ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
Vue 中英文组件样式写法
Vue 中英文组件样式写法 Vue 项目国际化样式处理一.全局(main.js)添加自定义指令: v-lang 会自动添加语言对应的 class [中:zh,英:en] Vue.direct ...
vue的scoped 样式隔离，样式穿透，及细节
先说环境吧:vue 3.2.45,也试过vue 3.2.16 vue的scoped样式隔离原理: 在当前组件的.vue文件中,如果style标签加了scoped属性,那么在组件渲染为DOM时,会对每 ...
前端之vue的CSS样式
vue的CSS样式 vue项目的结构 Vue的三种样式化方法: 外部CSS文件样式向单个文件组件添加全局样式单个组件内部的样式相关名称: CSS预处理器(如SCSS)或后处理器(如PostCSS ...

最新文章

热门文章