Vue的样式绑定详解
目录
- 1.样式绑定（class、style）
- 1.1绑定class
- 1.2绑定style
- 总结
1. 样式绑定（class、style）
1.1 绑定class
固定的类名就正常的写，需要动态绑定的类名就v-bind去绑定它
例如：:class= "mood"
下面举一些适用的场景：
1.绑定class样式—字符串写法，适用于：样式的类名不确定，需要动态指定
2.绑定class样式 — 数组写法使用的场景 ：绑定的样式的个数不确定，名字也不确定
3.绑定class样式 — 对象写法使用的场景：绑定的个数确定的，名字也确定，不确定的是用不用该类名
<body>
<style>
.basic {
width: 100px;
height: 100px;
border: 2px solid black;
}
.happy {
width: 100px;
height: 100px;
border: 2px solid orange;
background-color: palevioletred;
}
.sad {
width: 100px;
height: 100px;
border: 2px solid black;
background-color: silver;
}
.normal {
width: 100px;
height: 100px;
border: 2px solid greenyellow;
background-color: sandybrown;
}
.outline {
border-radius: 20%;
}
.color {
color: skyblue;
}
.size {
font-family: '微软雅黑';
font-size: 20px;
font-weight: bold;
}
</style>
<div id="root">
<!--
需求1 ：点击div1 随机切换mood
绑定class样式 --- 字符串写法
1. 固定的class类名就正常写，需要动态指定的class类名就 :class="xxx" 写到这里面
2. 使用的场景 : 样式的类名不确定，需要去动态指定
-->
<div class="div1 basic" :class="mood" @click="random">{{name}}</div>
<!--
需求2 ： 点击div2 添加类,或者删除类
绑定class样式 --- 数组写法
1. 使用的场景 ：绑定的样式的个数不确定，名字也不确定
2. shift() ：移除数组中第一个数据， push("xxx")；在末尾添加一个新的数据
-->
<div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div>
<!-- 注意点：在vue操作下 " " 里面的写的字符串是表达式，" '' " 里面写的字符串就是值 -->
<!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
<!--
需求3 ：在outline和color之间进行切换
绑定class样式 --- 对象写法
使用的场景：绑定的个数确定的，名字也确定，不确定的是用不用该类名
-->
<div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name: "Hello,Vue!",
mood: "normal",
classArr:['outline','color','size'],
classObj:{
outline:true,
color:true
}
},
methods: {
random() {
let arr = ["happy", "sad", "normal"]
// Math.floor : 表示向下取整, Math.random()：取值是0-1，1是取不到的
this.mood = arr[Math.floor(Math.random() * 3)]
},
remove(){
this.classArr.shift()
},
change(){
vm.classObj.color = !vm.classObj.color
vm.classObj.outline = !vm.classObj.outline
}
}
})
</script>
1.2 绑定style
例如：:style = "styleobj"
<div id="root" :style="styleobj">
Hello,{{name}}!
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name:"Vue",
styleobj:{
fontSize: 50 + "px",
color: "red",
border:1+"px"+" "+"solid"+" "+"black"
}
}
})
</script>
总结
本篇文章就到这里了，介绍了class和style如何绑定，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
Vue 样式绑定的实现方法
学习 Vue 的时候觉得样式绑定很简单,但是使用的时候总是容易搞晕自己.因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的.这篇文章就简单对 Vue 绑定做个总结. 操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是属性,所以可用v-bind处理,通过表达式计算出字符串结果即可.不过字符串拼接麻烦且易错.因此,在将v-bind用于class和style时,Vue做了专门增强,表达式结果类型除了字符串之外,还可是对象或数组. Cl
-
Vue绑定内联样式问题
使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <div :sty
-
Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释 <!DOCTYPE html>
-
Vue.js样式动态绑定实现小结
在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式- vue的最大特点是数据驱动,利用特殊的语法将DOM"绑定"到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定- (一定要充分理解数据驱动的含
-
Vue绑定class和绑定内联样式的实现方法
目录 绑定class 绑定内联样式 绑定class 方式一: 对象语法:给 v-bind:class传 一个对象,以动态地切换 class 当对象中某key对应的值为true时,该key做为className被添加到标签上 .box { width: 100px; height: 100px; background-color: gray; } .circle { border-radius: 50%; } <div id="app"> <div class=&quo
-
Vue的样式绑定详解
目录 1.样式绑定(class.style) 1.1绑定class 1.2绑定style 总结 1. 样式绑定(class.style) 1.1 绑定class 固定的类名就正常的写,需要动态绑定的类名就v-bind去绑定它 例如::class= "mood" 下面举一些适用的场景: 1.绑定class样式—字符串写法,适用于:样式的类名不确定,需要动态指定 2.绑定class样式 — 数组写法使用的场景 :绑定的样式的个数不确定,名字也不确定 3.绑定class样式 — 对象写法使用
-
vue.js数据绑定操作详解
本文实例讲述了vue.js数据绑定操作.分享给大家供大家参考,具体如下: 数据绑定 响应式的数据绑定系统.建立绑定之后,DOM将和数据保持同步,无须手动维护DOM.使代码能够更加简洁易懂.提升效率. 数据绑定语法 1.文本插值 {{ }}Mustache标签 <span>Hello {{ name }}</span> data:{ name: 'vue' } == > Hello vue 单次插值 首次赋值后再更改vm实例属性值不会引起DOM的变化 <span v-on
-
Vue transition过渡组件详解
目录 一.vue里面的transition组件 二.transition组件应用CSS过渡 (1)单元数/组件过渡 (2)多个元素过渡 (3)多个组件过渡 (4)列表过渡 三.JavaScript钩子 一.vue里面的transition组件 Vue提供了这个transition组件,可以使得在v-if条件渲染.v-show条件显示.动态组件的时候可以给到任意元素和组件添加了进入或离开元素过渡. 二.transition组件应用CSS过渡 在应用css过渡的时候,transition组件会在恰当
-
基于Vue单文件组件详解
本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon
-
vue模板语法-插值详解
1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使
-
微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .norm
-
Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数据的唯一接口. 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号). 子组件不能直接在模板里面渲染父元素的数据. 如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据.然后在模板里渲染这个变量(前面的a),这时候渲染
-
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父
-
Vue生命周期区别详解
生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因
-
React事件处理和表单的绑定详解
目录 一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理 二.表单 一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用: