davy_yg
5 months ago
1372
13
Vue

change box width and color

Posted 5 months ago by davy_yg

index.html

<!-- Put this in the HTML section in JSFiddle! -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">

<div id="app">
<div class="demo" :style="{backgroundColor: color}"></div>
<div class="demo" :style="myStyle"></div>
<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">

</div>

<script src="app.js"></script>

app.js

new Vue({
el: '#app',
data: {
	color: 'gray',
	width: 100
},
computed: {
	myStyle: function(){
		return {
			backgroundColor: this.color,
			width: this.width + 'px';
		};
	}
}
})

style.css

.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

.blue {
background-color: blue;
}

.gray {
background-color: gray;
}

I expected when I input the color and the width, the next three boxes will changes their colors. Yet, it does not work. Any clue why?

Please sign in or create an account to participate in this conversation.