VueJS样式绑定:v-bind

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{background: #444;color: #eee;
}
.class2{background: red;color: #fff;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><div id="app"><label for="r1">黑色背景</label><input type="checkbox" v-model="class1" id="r1"><label for="r2">红色背景</label><input type="checkbox" v-model="class2" id="r2"><br><br><div v-bind:class="{'class1': class1}">directiva v-bind:class</div>
<div v-bind:class="{'class2': class2}">directiva v-bind:class</div>
</div><script>
new Vue({el: '#app',data:{class1: true,class2: true}
});
</script>
</body>
</html>

实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类.

效果：

转载于:https://www.cnblogs.com/boonya/p/7090026.html

VueJS样式绑定:v-bind相关推荐

VueJS样式绑定v-bind:class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
Angular属性绑定，class绑定，事件绑定，属性样式绑定
多谢大佬指正,原创转载连接. 属性绑定插值表达式:src="{{user.pic}}" 使用: [ ] :[property]="变量" 使用:bind-:b ...
Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备带领大家学习分支(if.else).以及循环(for) 至于属性与样式绑定在上一篇文章已经讲解分支循环实现选项卡分支(if.else if.else) 主要指if.else if.e ...
vue条件渲染、列表渲染、样式绑定
vue 官网 ---- https://cn.vuejs.org/v2/guide/class-and-style.html 样式绑定 class绑定 1.对象语法 <div class=&qu ...
Attribute 绑定、类绑定和样式绑定
Attribute 绑定.类绑定和样式绑定 1. 绑定到 Attribute 优先设置带有 Property 绑定的元素的 Property.如果没有可绑定的元素 Property,可以使用 Attr ...
007_Vue style样式绑定
1. style样式绑定处理 1.1. 对象语法 <div v-bind:style="{width: '400px', height: '50px'}"></d ...
案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定
需求:实现简单的加法计算,分别输入数值a和数值b ,点击计算按钮,结果显示在下面. <!DOCTYPE html> <html lang="en"> < ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...

VueJS样式绑定:v-bind

VueJS样式绑定:v-bind相关推荐

最新文章

热门文章