Khandaker Toihidul Islam
Software Engineer
Backend : PHP | Mysql | Symfony | CakePhp | Wordpress | Drupal
Frontend : Node js | Vue js | React Js | Javascript | HTML | CSS | Bootstrap
Tools , Server : Nginx | Apache | Git | Jenkins | Jira | Asana | Silenium | Spira

Vue Dynamic styling by class

<style type="text/css">
	.demo{
		width: 200px;
		height: 200px;
		border: 1px solid grey;
		margin: 20px;
	}
	.red{
		background-color: red;
	}
	.blue{
		background-color: blue;
	}
</style>

	<div id="app">
		<div class="demo" @click="attachedRed =! attachedRed" :class="{ red: attachedRed }"> Click here</div>
		<div class="demo" :class="{ red: attachedRed }"></div>
		<div class="demo"></div>
	</div>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			attachedRed : false
		}

	});
</script>

Demo http://vue.toihid.com/section-2/vue_dynamic_style_by_class.php

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *