Vue学习（二）：class与style绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>class与style绑定</title><style type="text/css">.static {font-weight: bold;}.class-a {color: blue;}.class-b {font-size: 22px;}</style>
</head>
<body>
<!--1.绑定 HTML Class-->
<!--对象语法-->
<div id="example1" class="static" v-bind:class="{'class-a': isA, 'class-b': isB}">Hello Vue.</div>
<!--数组语法-->
<div id="example2" class="static" v-bind:class="[classA, classB]">Hello Vue.</div>
<div id="example3" class="static" v-bind:class="[classA, isB ? classB : '']">Hello Vue.</div><!--2.绑定内联样式-->
<!--对象语法-->
<div id="example4" class="static" v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">Hello Vue.</div>
<div id="example5" class="static" v-bind:style="styleObject">Hello Vue.</div>
<!--数组语法-->
<div id="example6" class="static" v-bind:style="[styleObjectA, styleObjectB]">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>// example 1
    let vm1 = new Vue({el: '#example1',data: {isA: true,isB: false}});console.log(vm1.$el);// example 2
    let vm2 = new Vue({el: '#example2',data: {classA: 'class-a',classB: 'class-b'}});console.log(vm2.$el);// example 3
    let vm3 = new Vue({el: '#example3',data: {classA: 'class-a',classB: 'class-b',isB: false}});console.log(vm3.$el);// example 4
    let vm4 = new Vue({el: '#example4',data: {activeColor: 'red',fontSize: '30'}});console.log(vm4.$el);// example 5
    let vm5 = new Vue({el: '#example5',data: {styleObject: {color: 'red',fontSize: '25px'}}});console.log(vm5.$el);// example 6
    let vm6 = new Vue({el: '#example6',data: {styleObjectA: {color: 'blue',fontSize: '35px'},styleObjectB: {'text-decoration': 'underline'}}});console.log(vm6.$el);
</script>
</body>
</html>

结果：

转载于:https://www.cnblogs.com/Jimc/p/10100961.html

Vue学习（二）：class与style绑定相关推荐

VUE学习(二十)、插槽
VUE学习(二十).插槽一.默认插槽 1.Category.vue <template><div class="category"><h3>{ ...
VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例演示 ...
Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
WEB前端 vue学习二组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
Vue基础之Class和Style绑定
既然v-bind可以动态绑定标签的属性,那么也可以用v-bind来处理class和style,只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 ...
Vue学习(二)-胡子({{}})语法
一,插值操作这种语法叫做 Mustache 语法中文叫做胡子的意思,两个 {{}} 长的比较像胡子,所以这样命名了 <body><div id="app"&g ...
Vue学习笔记之09-v-model双向绑定
v-model的基本使用在input框中添加指令, v-model, 值为需要绑定的data数据这样的话, 修改input框中的内容, data中的内容也会响应式改变 <div id=&qu ...
Vue学习二：安装element-ui组件库
上一章:搭建Vue环境搭建完vue环境后,安装element-ui使用其组件库,提高开发效率. 1.打开cmd,cd到在项目目录下执行npm install element-ui,安装完成后,查看 ...
vue清除绑定的class_vue 的 class 和 style 绑定的方法【05】
学习要点:1.绑定 class 2.绑定 style 本节课我们来开始学习 Vue 的 class 和 style 绑定的方法. 一．绑定 class 1. v-bind:class 不但可以设置 c ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...

Vue学习（二）：class与style绑定

Vue学习（二）：class与style绑定相关推荐

最新文章

热门文章