zoukankan      html  css  js  c++  java
  • [Vue] Use Vue.js Watchers to Respond to Async Updates

    Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.

    <template>
    
        <section class="container">
            <item-description></item-description>
            <h1 class="title">
                {{message | capitalize}}
            </h1>
            <button @click="changeMessage" class="button">Change Message</button>
            <hr>
            <section>
                <h2>Mouse event</h2>
                <div>{{counter}}</div>
                <div @mouseover="inc">Mouse over here to change counter</div>
            </section>
            <section>
                <h2>Keyboard events</h2>
                <form @submit.prevent="submit">
                    <input type="text"
                           v-model="firstName"
                           @keyup.enter="submit"
                           @keyup.alt.ctrl.shift.down="keyeventHandler"/>
                    <button v-bind:disabled="buttonDisabled">{{buttonText}}</button>
                </form>
                <div>
                    {{key}}
                </div>
            </section>
        </section>
    </template>
    
    <style scoped>
    .title
    {
      margin: 50px 0;
    }
    
    </style>
    
    <script>
    
      import ItemDescription from '../components/item-description';
    
      export default {
        data() {
          return {
            message: 'this is my vue!',
            counter: 0,
            key: "",
            firstName: "",
            buttonText: "Add"
          }
        },
    
          computed: {
            buttonDisabled: function() {
              return this.firstName == "";
            }
          },
          watch: {
            firstName: function(){
              this.buttonText = this.firstName !== "" ? "Add " + this.firstName : "Add Dinosaur";
            }
          },
    
        components: {
            ItemDescription
        },
    
        filters: {
            capitalize(value) {
                return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
            }
        },
    
        methods: {
          changeMessage() {
            this.message = "Updated message here!"
          },
    
          inc() {
            this.counter += 1;
          },
    
          keyeventHandler() {
            this.key = "Ctrl + alt + shift + down is clicked"
          },
    
          submit() {
            console.log("form is submitted, the value is", this.firstName);
          }
        }
      }
    
    </script>
  • 相关阅读:
    勤于思考,善于总结,积极进取,认识自己
    notepad++中cmd运行中文乱码?
    notpad++使用cmd的快捷键设置
    深刻理解Table以及关于table的插件(1)
    单向链表
    apriori算法
    保存一个班级的学生信息
    测试list列表中append和insert的执行速度
    二分查找
    顺序查找法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6323741.html
Copyright © 2011-2022 走看看