html VueJS属性绑定

Posted 2021-05-11

<script src="https://unpkg.com/vue"></script>

<div id="app">
	<p :class="cssClass">mit Doppelpunkt</p>
	<p v-bind:class="cssClass">mit v-bind</p>
	<input type="text" :value="cssClass" v-on:input="cssClass = $event.target.value">
	<input type="text" :value="cssClass" @input="cssClass = $event.target.value">
	<p><small>'red' or 'blue'</small></p>
</div>

<script>
	new Vue({
		el: '#app',
		data: {
			cssClass: 'blue'
		}
	});
</script>

<style>
	.red { color: red; }
	.blue { color: blue; }
</style>