Vue学习

最新推荐文章于 2025-06-11 14:54:57 发布

原创最新推荐文章于 2025-06-11 14:54:57 发布 · 346 阅读

本文深入解析Vue.js中关键指令的使用方法，包括v-show、v-if、v-bind、v-for和v-model，通过实例展示了如何控制元素显示、绑定属性、列表渲染及表单数据双向绑定。

v-show

隐藏图标

v-show=true 当true时图标出现
v-show=“age>=18” 当age大于等于18时，图片出现。

点击按钮，图标出现，再点击隐藏。

    <div id="app">
        <input type="button" value="隐藏图标" @click="change">
        <img v-show="isshow" src="imge/3.jpg" alt="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
               isshow:false
            },
            methods:{
                change:function(){
                  this.isshow=!this.isshow;
                }
            }
        })
    </script>

注意：只有函数里可以用等号。

v-if

v-show和v-if的区别。

频繁切换的用v-show。反之用v-if，因为性能大。
v-show操作的是样式。v-if操作的是dom，直接移除再添加回来。

v-bind

操作元素的属性,显示属性

在这里插入图片描述

img v-bind:src="imgSrc"
img :src="imgSrc"

本地应用

在俩个链接后，来回切换图片，第一张时，左面三角消失，最后一张，右面三角消失。

<body>
  <div id="mask">
    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
        深圳创维校区环境
      </h2>
      <!-- 图片 -->
      <img :src="imgArr[index]" alt="" />
      <!-- 左箭头 -->
      <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./images/prev.png" alt="" />
      </a> -->
      <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          "./images/00.jpg",
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg",
          "./images/04.jpg",
          "./images/05.jpg",
          "./images/06.jpg",
          "./images/07.jpg",
          "./images/08.jpg",
          "./images/09.jpg",
          "./images/10.jpg",
        ],
        index: 0
      },
      methods: {
        prev:function(){
          this.index--;
        },
        next:function(){
          this.index++;
        }
      },
    })
  </script>
</body>

a href="javascript:void(0)"//表示点击链接后，什么都不发生

v-for

在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <li v-for="(it,index) in arr">
            {{index}}lkq:{{it}}
        </li>
    <h2 v-for="it in shucai" v-bind-title="it.name">
         {{it.name}}
    </h2>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        arr:["北京","上海","广州"],
        shucai:[
            {name:"蛋炒饭"},
            {name:"烤肉"}
        ]
      },
      methods: {
         add:function(){
             this.shucai.push({name:"烤冷面"});
         },
         remove:function(){
             //从头开始移除
             this.shucai.shift();
         }
      },
    })
  </script>
</body>

v-model
获取和设置表单元素的值（双向数据捆绑），表单输入变化后message变化

在这里插入图片描述

<body>
    <div id="app">
        <!-- 按回车之后反应 -->
       <input type="text" v-model="message" @keyup.enter="getM">
       <h2>{{message}}</h2>
    </h2>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message:"lkq"
      },
      methods:{
          getM:function(){
              alert(this.message);
          }
      }
    })
  </script>
</body>

记事本增删改查

增加互相绑定，v-model绑定数组和inputValue(输入内容)

      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus"/>
      //===============================
           add:function(){
           this.list.push(this.inputValue);
        },

删除：点击后，触发remove
splice删除传进来的索引，一次删一个。

<button class="destroy" @click="remove(index)"></button>
//====================
          remove: function (index) {
          this.list.splice(index, 1);
        },

统计：用v=text渲染到页面上

<strong>{{ list.length }}</strong>

清空:数组赋值为null


      <button v-show="list.length!=0" class="clear-completed" @click="clear">

//============================
        clear: function () {
          this.list = [];
        }

隐藏：v-if="list.length!=0"和v-show="list.length!=0" 等于0时，隐藏button和span

      <span class="todo-count" v-if="list.length!=0">
        <strong>{{ list.length }}</strong> items left
      </span>
      <button v-show="list.length!=0" class="clear-completed" @click="clear">