vue10-class数组样式绑定

首先看代码

<!DOCTYPE html>
<html lang=en><head><meta charset="utf-8" /><title>Hello world</title><script src="vue.js"></script><style>.activated {color: red;}.activated-one {font-size: 50px;}</style>
</head><body><div id="root"><!--class数组绑定 后面加一个数组，可以写多个值，数组的值会被vue中的值代替 --><div @click="handleDivClick" :class="[activated,activatedOne]">HelloWorld</div></div><script>var vm = new Vue({el: "#root",data: {activated: "",activatedOne: "activated-one"},methods: {handleDivClick: function () {if (this.activated === "activated") {this.activated = "";} else {this.activated = "activated";}}}})</script>
</body></html>

vue绑定class属性，后面跟着要给数组，数组的值就是vue实例中变量的值，把样式的名称赋值给变量，渲染后就赋给了class属性。

vue10-class数组样式绑定相关推荐

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 ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
VueJS样式绑定v-bind:class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...
Vue样式绑定~非常详细哦
下面是对Vue样式绑定的整理,希望可以帮助到有需要的小伙伴~ 文章目录样式绑定 class样式处理样式绑定语法细节 style样式处理样式绑定 class样式处理对象语法 <div v- ...
Vue语法：类名和样式绑定
Vue语法:类名和样式绑定虽然类名class和样式style接收的类型都是字符串,但实际上类名是由数组拼接而成,而样式是由对键值对拼接而成. 通过字符串.数组.和对象三种方式为节点绑定类名属性: & ...
mpvue样式绑定总结
mpvue样式绑定在使用mpvue的时候,很多同学应该会感到很不方便,比如没法用vue-router,没法在js中控制节点的style属性样式,只能通过样官方推荐的样式绑定的办法控制样式,最难受的是 ...
Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备带领大家学习分支(if.else).以及循环(for) 至于属性与样式绑定在上一篇文章已经讲解分支循环实现选项卡分支(if.else if.else) 主要指if.else if.e ...

vue10-class数组样式绑定

vue10-class数组样式绑定相关推荐

最新文章

热门文章