VUE v-bind绑定class和style

1、绑定class

（1）对象语法

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<div class="static" :class="{'active':isActive,error:isError}">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isActive: true,
isError: true
}
});
</script>
</body>
</html>

对象可以传入多个属性，：class可以与普通的class共存。

（2）数组语法

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<div class="static" :class="[activeCls,errorCls]">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeCls: 'active',
errorCls: 'error'
}
});
</script>
</body>
</html>

2、绑定内联样式

v-bind:style 给元素绑定内联样式，也有对象和数组语法写法。由于直接写一长串样式不便于阅读和维护，所以一般写在data或者computed里。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<div :style="styles">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
styles: {
color: 'red',
fontSize: '14px'
}
}
});
</script>
</body>
</html>

使用;style时vuejs会自动添加前缀。

更多专业前端知识，请上【猿2048】www.mk2048.com

VUE v-bind绑定class和style相关推荐

vuejs里:style和:class的区别（vue动态操作绑定class 和 style的方法）
Class 与 Style 绑定 - Vue.js :class的意思是动态绑定class的名称,然后我们在<style>里面去专门设置class的效果即可用法: :style=&quo ...
Vue的数据绑定、Vue的事件绑定、Class和Style的绑定
一.Vue的数据绑定 1. 单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变了Model时,View就会自动刷新.不需要进行额外的DOM操作就可以实现视图和模型的联动 ...
“约见”面试官系列之常见面试题第九篇vue实现双向绑定原理（建议收藏）
目录 1.原理 2.实现在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫m ...
[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 1 window.onload = function () { 2 var c = new Vue({ 3 e ...
vue radio双向绑定_Vue 双向绑定
Vue 双向绑定 MVC模式以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 MVVM模式 MVVM模式就是Model– ...
vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
Vue的基础认知二---vue的双向绑定/vue获取DOM节点
在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一-构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容. 一.vue的双向绑定 mvvm框架: ...
Android-服务Service(2)-bind绑定Service及两种生命周期
上篇是第一种方法,这里主要是第二种Context.bindService()方法 1. 开发步骤 1. 绑定服务 Intent intent=new Intent(getBaseContext(),M ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...

VUE v-bind绑定class和style

VUE v-bind绑定class和style相关推荐

最新文章

热门文章