Vue2.x入门（v-model v-bind v-on v-show v-if v-for等指令）

最新推荐文章于 2024-05-15 23:25:47 发布

zhopq

最新推荐文章于 2024-05-15 23:25:47 发布

阅读量114

点赞数

分类专栏：前端个人笔记文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_42094345/article/details/128406912

版权

前端个人笔记专栏收录该内容

20 篇文章 2 订阅

订阅专栏

这个博客展示了如何使用Vue.js进行页面元素的交互，包括改变背景颜色、切换显示信息、根据数字判断奇偶性、高亮选中列表项、动态添加删除元素等操作。通过点击按钮触发事件处理函数，实现数据和视图的双向绑定。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <title>Document</title>
    <script src="./js/vue/vue.js"></script>
  </head>
  <style>
    * {
      margin: 5px;
      padding: 5px;
    }

    .cornflowerblue {
      background-color: rgb(100, 210, 237);
    }

    .blueviolet {
      background-color: rgb(198, 100, 237);
    }

    .odd {
      background-color: rgb(123, 237, 100);
    }

    .even {
      background-color: rgb(237, 100, 216);
    }

    .active {
      background-color: rgb(239, 87, 153);
    }
  </style>
  <body>
    <div id="box">
      <div :class="whichColor">
        <div>{{myname}}</div>
        <div><button @click="handleChange()">change</button></div>
        <div v-show="showInfo">你好，我叫zhaopq</div>
        <div v-show="!showInfo">你好，我叫lf</div>
      </div>

      <div>
        <div v-bind:class="numType">{{num}} => {{num%2==0?"偶数":"奇数"}}</div>
        <button v-on:click="setNum()">setNum</button>
      </div>

      <div>
        <ul>
          <li
            v-for="item,index in list"
            :class="current === index ?'active':''"
            @click="handleSelectLi(index)"
          >
            {{item}} - {{index}}
          </li>
        </ul>
      </div>

      <div v-html="myhtml"></div>

      <div>
        <input type="text" v-model="addvalue" />
        <button @click="handleAdd">add</button>
        <button @click="handleClean">clean</button>
        <div v-show="!todolist.length">当前没有元素......</div>
        <ul v-show="todolist.length">
          <li v-for="item,index in todolist">
            {{item}}
            <button @click="handleDel(index)">del</button>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <!-- <script src="./js/vue/vue3.js"></script> -->
  <script>
    box = new Vue({
      el: "#box",
      data: {
        myname: "zhaopq",
        whichColor: "cornflowerblue",
        num: "0",
        numType: "",
        showInfo: true,
        list: ["AAA", "BBB", "CCC", "DDD", "EEE"],
        current: 0,
        myhtml: "<font color='red'>v-html，插入标签片段</font>",
        todolist: ["aaa", "bbb", "ccc"],
        addvalue: "",
      },
      methods: {
        handleChange() {
          console.log(this.myname);
          if (this.myname == "zhaopq") {
            this.myname = "liuf";
            this.whichColor = "blueviolet";
          } else if (this.myname == "liuf") {
            this.myname = "zhaopq";
            this.whichColor = "cornflowerblue";
          }
          this.showInfo = !this.showInfo;
        },
        setNum() {
          console.log("setNum");
          this.num = Math.floor(Math.random() * 100);
          if (this.num % 2 == 0) {
            this.numType = "even";
          } else {
            this.numType = "odd";
          }
        },
        numTypeChange() {
          console.log("numTypeChange");
          if (this.num % 2 == 0) {
            this.numType = "even";
          }
        },
        handleSelectLi(index) {
          console.log(index);
          this.current = index;
        },
        handleAdd() {
          console.log("handleAdd:" + this.addvalue);
          if (this.addvalue == "") {
            return alert("元素不能为空! ");
          }
          if (this.todolist.includes(this.addvalue)) {
            return alert("元素已存在！");
          }
          this.todolist.push(this.addvalue);
          this.addvalue = "";
        },
        handleDel(index) {
          this.todolist.splice(index, 1);
        },
        handleClean() {
          this.todolist = [];
        },
      },
    });
  </script>
</html>