<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.textcolor{
color:aquamarine;
}
.textsize{
font-size: 50px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vueApp">
<h1>Vue.js元素绑定多个样式简单学习</h1>
<h2 v-bind:class="textclass">class你好</h2>
<h2 :class="textclass">样式你好</h2>
<p>样式是对象键名为样式,键值为布尔判断值</p>
<button v-on:click="changeColor()">点击我试一试</button>
</div>
</body>
<script>
let vueApp=new Vue({
el:"#vueApp",
data:{
textclass:{
textcolor:true,
textsieze:true,
}
},
methods:{
changeColor:function(){
this.textclass.textcolor=!this.textclass.textcolor;
this.textclass.textsize=!this.textclass.textsize;
}
}
}
);
</script>
</html>
Vue.js学习-12-Vue.js元素绑定多个样式简单学习
原创
©著作权归作者所有:来自51CTO博客作者高万禄的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue.js入门篇之Vue.js 样式绑定
在 Vue.js 中,我们可以使用 v-bind 来动态设置元素的 class 和 style 样式属性。
javascript vue.js 前端 数组 Vue -
Vue.js学习笔记 03、Vue样式篇
文章目录前言一、基础样式绑定1.1、基础样式绑定(v-bind:class)1.2、对象与数组形式控制样式二、进阶使用进阶一:子组件的样式绑定进阶二:行内样式编写
vue.js javascript 前端 css 数组 -
Vue.js中动态绑定样式
学习Vue.js
vue.js -
Vue.js 学习笔记
我想要的,时间自然会给我。年龄也不会是我的阻碍,反而会是我的
数据 Vue html -
Vue.js 样式绑定(1)
demo 效果: 2018-03-20 13:36:35
vuejs html css IT -
gpu扣卡模组 与 普通模组的区别
一、PC架构 先看一下酷睿架构图: &n
gpu扣卡模组 与 普通模组的区别 数据 寄存器 链路