0👍
In your data property, define a variable that will hold access to the name
so to speak. In this case, we’ll initialize it with a value of Alice
:
data () {
return {
name: 'Alice'
}
}
We can add a click method now and bind it to our div
element so that it will swap the name:
methods: {
swap () {
this.name = 'Bob'
}
}
Finally, we need to modify our template
to receive a click handler
and use dynamic bindings to display our name
property from our data
object:
template: `<div @click="swap">Welcome, <span v-text="name"></span></div>`
Note that in the above illustration the v-text
is a directive and we have bound the value of our name
property to it, which we modify through the @click
handler we assigned to the swap
function.
0👍
You can use the event @click
on the div, with that you bind the click event to a specific method in this case I create toggleName()
Vue.component('greet', {
data() {
return {
name: 'Alice'
}
},
methods: {
toggleName() {
this.name = this.name == 'Alice' ? 'Bob' : 'Alice';
}
},
template: '<div @click="toggleName">Welcome {{ name }}</div>'
})
Then we create a method that accesses to the property defined in data
in this case is name
When we use the reserved word this
we access to our instance and from there w can access the property name
. Then we create a toggle for the name.
In order to access the variable in our template we need to use the special curly braces
{{ name }}
this time the this
is not needed.
- [Vuejs]-How to change the default typography in vuetify?
- [Vuejs]-Generate unique ID for Vue component via mixin