div#app
p v-if="seen"
{{ message | capitalize }}
p v-else
shown if not seen
span v-bind:title="message"
span :title="message"
ol
li v-for="todo in todos"
{{ todo.text }}
button v-on:click="reverseMessage"
button @click="reverseMessage"
input v-model="message"
div v-html="rawHtml"
div v-for="(value, key, index) in object"new Vue({
el: "#app",
data: {
seen: true,
message: "my messge",
todos: [
{ text: "todo 1" },
{ text: "todo 2" },
],
rawHtml: "<p>is html</p>",
},
methods: {
reverseMessage: function() {
this.message = reverse(this.message);
},
filters: {
capitalize: function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
},
computed: {
reversedMessageComputed: function() {
return reverse(this.message);
}
},
})
https://vuejs.org/v2/api/#v-on event bindings modifiers (e.g. @onclick.stop):
-
stop, prevent, capture, self, native, once
Links: