Vue demo box

Example

Handling User Input

Handling User Input

From Vue.js documentation Handling User Input

To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances.

Hello Vue.js!

<template>
  <div>
    <p class="message">{{ message }}</p>
    <button v-on:click="reverseMessage">
      reverseMessage
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
</script>

<style>
.message {
  font-size: 14px;
  color: red;
}
</style>

InputNumber

InputNumber

From Element-ui input number

Bind a variable to v-model in <el-input-number> element and you are set.

←