Vue.js基础教程：内容绑定与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43370373/article/details/118360040

本文深入讲解Vue.js的基础知识，包括内容绑定（v-text, v-html），事件处理（v-on基础，v-model），显示切换（v-show, v-if），属性绑定（v-bind），以及列表循环（v-for）。通过实例演示了如何创建本地应用，如计数器，并介绍了v-on的事件修饰符和v-model在表单元素中的应用。" 123318425,10912945,R语言data.table包数据分组聚合与标准差计算,"['数据挖掘', 'R语言', '数据分析']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地应用

1. 内容绑定,事件绑定

v-text
v-html
v-on

2. 显示切换,属性绑定

v-show
v-if
v-bind

3. 列表循环,表单元素绑定

v-for
v-on补充
v-model

v-text

<!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">

  <title>data</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <div id="app" >
        <p></h2><h2>{{message+'打工人'}}</h2></p>
        <h3 v-text="message+'打工人'"></h3>
        <h4 v-text="info+'打工人'"></h4>
        <h5>{{message+'打工人'}}</h5>
  </div>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:"今天也要加油哦!",   
        info:"加油"
              }
      })
    
  </script>
</body>
</html>

在这里插入图片描述

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式

v-html

<!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">
  <title>Document</title>
</head>
<body>
<!-- 2.html结构-->
  <div id="app">
  <p v-text="content"></p>
  <p v-html="content"></p>
  </div>
  <!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
     //创建实例
     var app = new Vue({
       el:"#app",
       data:{
         content:"<a href='http://www.baidu.com'>今天也要加油哦！</a>"
       }
     })
   </script>
</body>
</html>

在这里插入图片描述

v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

v-on基础

<!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">
  <title>Document</title>
</head>
<body>
  <!-- 2.html结构-->
  <div id="app">
    <input type="button" value="v-on指令" v-on:click="doit"></input>
    <input type="button" value="v-on简写"  @click="doit"></input>
  <input type="button" value="双击事件"  @dblclick="doit">s</input>  
  </div>
   <!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        //创建实例
         var app =new Vue({
           el:"#app",
           methods:{
             doit:function(){
               alert("做IT");
             }
           },
         })
       </script>
</body>
</html>

在这里插入图片描述

<!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">
  <title>Document</title>
</head>
<body>
  <!-- 2.html结构-->
  <div id="app">
    <input type="button" value="v-on指令" v-on:click="doit"></input>
    <input type="button" value="v-on简写"  @click="doit"></input>
    <input type="button" value="双击事件"  @dblclick="doit"></input>
    <h2 @click="changeFood">{{food}}</h2>
  </div>
   <!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        //创建实例
         var app =new Vue({
           el:"#app",
           data:{ 
            food: "番茄炒蛋"
          },
           methods:{
             doit:function(){
               alert("做IT");
           },
           changeFood:function(){
             //console.log(this.food);
             this.food+="很好吃！"
            }
          }
         })
       </script>
</body>
</html>

在这里插入图片描述

v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

Vue本地应用-计数器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>计数器</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <!-- html结构 -->
  <div id="app">

    <div class="input-num">
      <button @click="sub">
        -
      </button>
      <span>{{ num }}</span>
      <button @click="add">
        +
      </button>
    </div>
    <img src="./images/logo.svg" alt="" width="30%" />
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 编码 -->
  <script>
    // 创建Vue实例
    var app = new Vue({
      el: "#app",
      data: {
        num: 1
      },
      methods: {
        add: function () {
          // console.log('add');
          if (this.num < 10) {
            this.num++;
          } else {
            alert('别点啦,最大啦!');
          }
        },
        sub: function () {
          // console.log('sub');
          if (this.num > 0) {
            this.num--;
          } else {
            alert("别点啦,最小啦!")
          }
        }
      },
    })
  </script>
</body>

</html>

在这里插入图片描述

data中定义数据:比如num
methods中添加两个方法:比如add(递增),sub(递减)
使用v-text将num设置给span标签
使用v-on将add,sub分别绑定给+,-按钮
累加的逻辑:小于10累加,否则提示
递减的逻辑:大于0递减,否则提示

创建Vue示例时:el(挂载点),data(数据),methods(方法)
v-on指令的作用是绑定事件,简写为@
方法中通过this,关键字获取data中的数据
v-text指令的作用是:设置元素的文本值,简写为{{}}
v-html指令的作用是:设置元素的innerHTML

v-show

<!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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow"></input>
    <input type="button" value="累加年龄" @click="addAge"></input>
    <img src="images/logo.svg" alt="hhh" v-show="isShow">
    <img src="images/logo.svg" alt="hhhhh" v-show="age>=18">
  </div>
  <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        isShow: false,
        age: 17
      },
      methods: {
        changeIsShow: function () {
          this.isShow = !this.isShow;
        },
        addAge: function () {
          this.age++;
        }
      },
    })
  </script>
</body>

</html>

在这里插入图片描述

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新

v-show

<!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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">今天也要加油哦！</p>
    <p v-show="isShow">今天也要加油哦！</p>
    <h3 v-if="temperature>=35">好热呀！</h3>
  </div>
  <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        isShow: false,
        temperature: 40
      },
      methods: {
        toggleIsShow: function () {
          this.isShow = !this.isShow;
        }
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态,v-show通过display，v-if移除
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind指令</title>
  <style>
    .active {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        imgSrc: "images/logo.png",
        imgTitle: "黑马程序员",
        isActive: false
      },
      methods: {
        toggleActive: function () {
          this.isActive = !this.isActive;
        }
      },
    })
  </script>
</body>

</html>

在这里插入图片描述

v-bind指令的作用是:为元素绑定属性
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式

巩固练习——图片切换

1.定义图片数组
2.索引（添加图片索引）
3.v-bind（绑定src属性）
4.v-on（图片切换逻辑）
5.v-show（显示状态切换）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/changeimg.css" />
</head>

<body>
  <div id="mask">
    <div class="center">
      <h2 class="title"><img src="./images/logo@2x.png" alt=""> 图片切换</h2>
      <img :src="imgList[index]" alt="" />
      <a href="javascript:void(0)" @click="prev" class="left" v-show="index>0">
        <img src="./images/prev.png" alt="" />
      </a>
      <a href="javascript:void(0)" @click="next" class="right" v-show="index<imgList.length-1">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>

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

  <script>
    const app = new Vue({
      el: "#mask",
      data: {
        imgList: [
          "./images/sheep1.jpeg",
          "./images/sheep2.jpeg",
          "./images/sheep3.jpeg",
          "./images/sheep4.jpeg",
          "./images/sheep5.jpeg",
          "./images/sheep6.jpeg",
          "./images/sheep7.jpeg",
          "./images/sheep8.jpeg",
          "./images/sheep9.jpeg",
          "./images/sheep1.jpeg",
          "./images/sheep1.jpeg",
        ],
        index: 0
      },
      methods: {
        // 上一张
        prev() {
          this.index--;
        },
        // 下一张
        next() {
          this.index++;
        }
      }
    });
  </script>
</body>

</html>

* {
  margin: 0;
  padding: 0;
}

html,
body,
#mask {
  width: 100%;
  height: 100%;
}

#mask {
  background-color: #c9c9c9;
  position: relative;
}

#mask .center {
  position: absolute;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
#mask .center .title {
  position: absolute;
  display: flex;
  align-items: center;
  height: 56px;
  top: -61px;
  left: 0;
  padding: 5px;
  padding-left: 10px;
  padding-bottom: 0;
  color: rgba(175, 47, 47, 0.8);
  font-size: 26px;
  font-weight: normal;
  background-color: white;
  padding-right: 50px;
  z-index: 2;
}
#mask .center .title img {
  height: 40px;
  margin-right: 10px;
}

#mask .center .title::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 65px solid;
  border-color: transparent transparent white;
  top: -65px;
  right: -65px;
  z-index: 1;
}

#mask .center > img {
  display: block;
  width: 700px;
  height: 458px;
}

#mask .center a {
  text-decoration: none;
  width: 45px;
  height: 100px;
  position: absolute;
  top: 179px;
  vertical-align: middle;
  opacity: 0.5;
}
#mask .center a :hover {
  opacity: 0.8;
}

#mask .center .left {
  left: 15px;
  text-align: left;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mask .center .right {
  right: 15px;
  text-align: right;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

在这里插入图片描述

列表数据使用数组保存
v-bind指令可以设置元素属性,比如src
v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

v-for

<!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">
  <title>v-for</title>
</head>

<body>
  <div id="app">
    <input type="button" value="添加数据" @click="add"></input>
    <input type="button" value="移除数据" @click="remove"></input>
    <ul>
      <li v-for="(it,index) in arr">
        {{ index+1 }}一线城市:{{ it }}
      </li>
      <p v-for="item in vagetables" v-bind:title="item.name">
        {{item.name}}
      </p>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        arr: ["北京", "上海", "成都", "杭州", "深圳"],
        vagetables: [
          {
            name: "黄瓜",
          },
          {
            name: "西红柿",
          }
        ]
      },
      methods: {
        add: function () {
          this.vagetables.push({ name: "娃娃菜" });
        },
        remove: function () {
          this.vagetables.shift();
        }
      },
    })
  </script>
</body>

</html>

在这里插入图片描述
添加数据

移除数据

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的

v-on补充

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-on补充</title>
</head>

<body>
  <div id="app">
    <input type="button" value="点击" @click="doIt(666,'老铁')">
    <input type="text" @keyup.enter="sayHi">
  </div>
  <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      methods: {
        doIt: function (p1, p2) {
          console.log("做it");
          console.log(p1);
          console.log(p2);
        },
        sayHi: function () {
          alert("吃了没");
        }
      },
    })
  </script>
</body>

</html>

在这里插入图片描述

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种

v-model

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model指令</title>
</head>

<body>
  <div id="app">
    <input type="button" value="修改message" @click="setMessage">
    <input type="text" v-model="message" @keyup.enter="getMessage">
    <h2>{{ message }}</h2>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "今天也要加油！"
      },
      methods: {
        getMessage: function () {
          alert(this.message);
        },
        setMessage: function () {
          this.message = "每天都要加油";
        }
      },
    })
  </script>
</body>

</html>