Examples https://vuejs.org/examples/#attribute-bindings
페이지 정보
본문
https://vuejs.org/examples/#attribute-bindings
-------------------
<!--
Here we are reactively binding element attributes / properties to the state.
The :title syntax is short for v-bind:title.
-->
<script>
export default {
data() {
return {
message: 'Hello World!',
isRed: true,
color: 'green'
}
},
methods: {
toggleRed() {
this.isRed = !this.isRed
},
toggleColor() {
this.color = this.color === 'green' ? 'blue' : 'green'
}
}
}
</script>
<template>
<p>
<span :title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</p>
<!--
class bindings have special support for objects and arrays
in addition to plain strings
-->
<p :class="{ red: isRed }" @click="toggleRed">
This should be red... but click me to toggle it.
</p>
<!-- style bindings also support object and arrays -->
<p :style="{ color }" @click="toggleColor">
This should be green, and should toggle between green and blue on click.
</p>
</template>
<style>
.red {
color: red;
}
</style>