Vue-2.0——v-text、v-html、v-cloak、v-on、v-bind——案例

最新推荐文章于 2022-07-19 10:58:20 发布

千钧~

最新推荐文章于 2022-07-19 10:58:20 发布

阅读量212

点赞数

分类专栏： vue2.0 文章标签： vue.js

本文链接：https://blog.csdn.net/getchar97/article/details/104175361

版权

vue2.0 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例 1、跑马灯效果

<body>
    <div id="app">
      <p v-text="msg">跑</p>
      <button @click="start">开始</button>
      <button @click="stop">停止</button>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "猥琐发育，别浪~",
          interval: null
        },
        methods: {  // vue 实例能识别的方法
          start() {
            this.interval = setInterval(() => {
              this.msg = this.msg.substring(1) + this.msg.substring(0, 1);
            }, 500);
          },
          stop() {
            clearInterval(this.interval);
          }
        }
      });
    </script>
  </body>

案列二：简单计算器

<div id="app">
      <input type="text" v-model="num1" />
      <select v-model="opt">
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
      </select>
      <input type="text" v-model="num2" />
      <button @click="getResult">=</button>
      <input type="text" :value="result" disabled />
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          num1: 0,
          num2: 0,
          opt: 1,
          result: 0
        },
        methods: {
          // vue 实例能识别的方法
          getResult() {
            switch (this.opt) {
              case "0":
                this.result = parseInt(this.num1) + parseInt(this.num2);
                break;
              case "1":
                this.result = parseInt(this.num1) - parseInt(this.num2);
                break;
              case "2":
                this.result = parseInt(this.num1) * parseInt(this.num2);
                break;
              case "3":
                if (this.num2 == "0") {
                  alert("除数不能为0");
                  break;
                }
                this.result = parseInt(this.num1) / parseInt(this.num2);
                break;
            }
          }
        }
      });
    </script>
  </body>