Vue语法：类名和样式绑定

虽然类名class和样式style接收的类型都是字符串，但实际上类名是由数组拼接而成，而样式是由对键值对拼接而成。

通过字符串、数组、和对象三种方式为节点绑定类名属性:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类名和样式绑定</title><style>.color-gray{color: gray;}.size-18{font-size: 18px;}.style-italic{font-style: italic;}</style>
</head>
<body>
<div id="app"><p class="color-gray size-18 style-italic">vue2.0,精诚所至，金石为开</p><p :class="classStr">vue2.0,精诚所至，金石为开</p><p :class="classArr">vue2.0,精诚所至，金石为开</p><p :class="classObj1">vue2.0,精诚所至，金石为开</p><p :class="classObj2">vue2.0,精诚所至，金石为开</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>new Vue({el:'#app',data(){return{classStr:'color-gray size-18 style-italic', //拼接字符串classArr:['color-gray','size-18','style-italic'],    //数组classObj1:{//对象绑定类名'color-gray':true,'size-18':true,'style-italic':true},classObj2:{//对象 ,未绑定类名'color-gray':0,'size-18':'','style-italic':false}}}});
</script>
</body>
</html>

绑定样式的方法与类名相似，因为样式是以键值对的形式，所以不能像类名一样使用数组进行绑定。

为了方便，我将代码写在了一起

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类名和样式绑定</title><style>.color-gray{color: gray;}.size-18{font-size: 18px;}.style-italic{font-style: italic;}</style>
</head>
<body>
<div id="app">类名绑定：<p class="color-gray size-18 style-italic">vue2.0,精诚所至，金石为开</p><p :class="classStr">vue2.0,精诚所至，金石为开</p><p :class="classArr">vue2.0,精诚所至，金石为开</p><p :class="classObj1">vue2.0,精诚所至，金石为开</p><p :class="classObj2">vue2.0,精诚所至，金石为开</p>样式绑定：<p style="color:gray;font-size:18px;font-style:italic;">vue2.0,精诚所至，金石为开</p><p :style="styleStr">vue2.0,精诚所至，金石为开</p><p :style="styleObj1">vue2.0,精诚所至，金石为开</p><p :style="styleObj2">vue2.0,精诚所至，金石为开</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>new Vue({el:'#app',data(){return{/*类名绑定*/classStr:'color-gray size-18 style-italic', //拼接字符串classArr:['color-gray','size-18','style-italic'],    //数组classObj1:{//对象绑定类名'color-gray':true,'size-18':true,'style-italic':true},classObj2:{//对象 ,未绑定类名'color-gray':0,'size-18':'','style-italic':false},/*样式绑定*/styleStr:'color:gray;font-size:18px;font-style:italic;',//拼接字符串styleObj1:{//对象绑定样式'color':-1 ? 'gray' : 'yellow','font-size':[] ? '18px' : '','font-style':'italic'},styleObj2:{//对象，未绑定样式'color':0 ? 'gray' : '','font-size':'' ? '18px' : '','font-style':null ? 'italic' : ''}}}});
</script>
</body>
</html>

小白一枚，如有问题，请多多指教

Vue语法：类名和样式绑定相关推荐

VUE基本语法1-插值属性绑定
.1 插值绑定插值绑定是Vue中最常见.最基本的语法,绑定的内容主要有文本插值和HTML插值两种文本插值文本插值的方式十分简单,只要用双大括号(Mustache语法)将要绑定的变量.值.表达式括 ...
Vue样式绑定~非常详细哦
下面是对Vue样式绑定的整理,希望可以帮助到有需要的小伙伴~ 文章目录样式绑定 class样式处理样式绑定语法细节 style样式处理样式绑定 class样式处理对象语法 <div v- ...
mpvue样式绑定总结
mpvue样式绑定在使用mpvue的时候,很多同学应该会感到很不方便,比如没法用vue-router,没法在js中控制节点的style属性样式,只能通过样官方推荐的样式绑定的办法控制样式,最难受的是 ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
vue条件渲染、列表渲染、样式绑定
vue 官网 ---- https://cn.vuejs.org/v2/guide/class-and-style.html 样式绑定 class绑定 1.对象语法 <div class=&qu ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
vue样式绑定与事件处理器的基本使用
目录 Vue.js 样式绑定 Vue.js 事件处理器事件修饰符 Vue.js 样式绑定
Attribute 绑定、类绑定和样式绑定
Attribute 绑定.类绑定和样式绑定 1. 绑定到 Attribute 优先设置带有 Property 绑定的元素的 Property.如果没有可绑定的元素 Property,可以使用 Attr ...

Vue语法：类名和样式绑定

Vue语法：类名和样式绑定

Vue语法：类名和样式绑定相关推荐

最新文章

热门文章