<div id="content">
<Box1></Box1>
<Box2></Box2>
</div>* {
padding: 0;
margin: 0;
font-size: 24px;
}
.box1, .box2 {
padding: 16px;
margin: 16px;
border: 5px black dashed;
}
.red {
border-color: red;
background-color: transparentize(red, .7);
}
.blue {
border-color: blue;
background-color: transparentize(blue, .7);
}
.purple {
border-color: purple;
background-color: transparentize(purple, .7);
}
.green {
border-color: green;
background-color: transparentize(green, .7);
}
.yellow {
border-color: yellow;
background-color: transparentize(yellow, .7);
}
.orange {
border-color: orange;
background-color: transparentize(orange, .7);
}
input {
width: 100px;
}const state = Vue.observable({
box1Color: "red",
box2Color: "blue"
})
const Box1 = {
render(h) {
return h('div', { class: `box1 ${state.box1Color}` }, [
h('p', `Box 1 color: ${state.box1Color}`),
h('label', [
'Update box 2: ',
h('input', {
type: 'text',
attrs: { value: state.box2Color },
on: { input: e => state.box2Color = e.target.value }
})
])
])
}
}
const Box2 = {
render(h) {
return h('div', { class: `box2 ${state.box2Color}` }, [
h('p', `Box 2 color: ${state.box2Color}`),
h('label', [
'Update box 1: ',
h('input', {
type: 'text',
attrs: { value: state.box1Color },
on: { input: e => state.box1Color = e.target.value }
})
])
])
}
}
new Vue({
el: "#content",
components: {
Box1, Box2
}
})
External CSS
This Pen doesn't use any external CSS resources.