三十四、深入Vue.js语法(中篇)

标签: 前端  vue

@Author:Runsen
@Date:2020/6/15

人生最重要的不是所站的位置,而是内心所朝的方向。只要我在每篇博文中写得自己体会,修炼身心;在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰难,奋勇前行,不忘初心,砥砺前行,人生定会有所收获,不留遗憾 (作者:Runsen )

作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海!

v-on

v-on命令就是相当于js中的事件绑定,例如绑定click、mouseover等等监听事件。官网说明文档

直接使用指令v-on,使用简化指令@

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt">
    <input type="button" value="v-on简写指令" @click="doIt">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:"Runsen is 20",
      },
      methods: {
        doIt:function(){
          alert("doIt")
        }
      },
    })
  </script>
</body>
</html>

计数器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="input-num">
      <button @click='add'>-</button>
      <span>{{num}}</span>
      <button @click='sub'>+</button>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        num:1,
      },
      methods: {
        add:function(){
          if (this.num<10) {
            this.num++;
          } else {
            alert('最大值为10');
          }
        },
        sub:function(){
          if (this.num>0) {
            this.num--;
          } else {
            alert('最小值为0');
          }
        }
      },
    })
  </script>
</body>
</html>

v-show

v-show : 当flag为true,则显示,如果flag为false,则隐藏。v-show 的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="button" value="切换显示图片" @click="changIsshow">
    <input type="button" value="age+1" @click="add">
    <img src="https://img-blog.csdnimg.cn/20200609152208864.png"v-show="isshow">
    <img src="https://img-blog.csdnimg.cn/20200609152208864.png"v-show="age>=20">
  </div>
  
  <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: {
        changIsshow:function(){
          this.isshow = !this.isshow;
        },
        add:function(){
          this.age++;
        }
      },
    })
  </script>
</body>
</html>

v-if

v-if : 当flag为true,则显示,如果flag为false,则隐藏。v-if 的特点:每次都会重新删除或创建元素

body>
  <div id="app">
    <input type="button" value="切换显示" @click='changIsshow'>
      <p v-if="isshow">runsen</p>
  </div>
  <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: {
        changIsshow:function(){
          this.isshow = !this.isshow;
        },
      },
    })
  </script>
</body>

相同点:v-if与v-show都可以动态控制dom元素显示隐藏

不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。

v-bind

v-bind 用于处理 HTML 中的标签属性。标签对内定义v-bind + 冒号 + 属性=‘variable’,形如:

,作用是将属性与数据进行单向绑定,只能将数据层中的属性传给绑定属性。v-bind可缩写成 :title=“title”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" :alt="alt">
        <img :src="imgSrc1" :alt="alt">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
           el: '#app',
            data: {
               imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592199194786&di=b2d5483f86b8b38fb2dd12e932eaa889&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F839b48daee6bed189d49aa6eac912b353ce0db3d.jpg',
               imgSrc1: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592199212627&di=28f4daed2069121c770cf4fa6f79c412&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111113%2F1111131811fe8b6d1575c620d7.jpg',
               alt: '我是美女'
            }
        });
    </script>
</body>
</html>

v-for

v-for指令常用于遍历数组或者对象,然后依次渲染出指定的内容。同时,我们也知道,官方文档也建议,在使用 v-for指令时,记得要加上 key属性,方便提升应用性能。例如一个简单的增删Todo应用如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <input type="button" value="添加数据" @click="add">
      <input type="button" value="移除数据" @click="remove">
      <ul>
        <li v-for="(item, index) in arr" > 第{{index+1}}个城市:{{item}}</li>
      </ul>
      <h2 v-for="(item, index) in person" :key="index">{{item.name}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
           el: '#app',
           data() {
             return {
               arr:['北京','上海','广州','武汉'],
               person:[
                 {name:"Runsen"},
                 {name:"Maoli"}
               ]
             }
           },
           methods: {
             add:function(){
               this.person.push({name:"maoli"})
             },
             remove:function(){
               this.person.shift()
             }
           },
        });
    </script>
</body>
</html>

如果本文对你有帮助,大家可以点赞转发一波,有错误大家可以评论指出,感谢!

大家继续加油,未来可期!Runsen的征途是星辰大海!

版权声明:本文为weixin_44510615原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44510615/article/details/106756381

智能推荐

说说 Python Django 应用的基础目录结构

通过以下 django-admin 指令创建应用之后,就会生成应用的基础目录结构。 比如,我们建立了一个叫 ‘first’ 的应用,它的目录结构是这样的: 目录或文件 说明 最外层的 first/ 这是新应用的根目录,所有与该应用相关的内容都放在这里。 manage.py 用于管理 Django 项目的命令行工具。 里面一层的 first/ 目录 是一个...

Springboot整合rabbitMQ

依赖: 配置文件application.yml RabbitConfig 消息生产者RabbitProducer 消息消费者RabbitCustomer 通过Controller进行调用 启动项目后调用接口: 结果:...

Thread.join()方法的使用

如果一个线程A执行了thread.join()语句,代表当前线程A等待thread线程终止后才从thread.join()方法返回 并且这个方法具有超时特性,可以添加参数设置 输出结果: jdk中Thread.join()方法的源码(进行了部门调整)   每个线程终止的条件是前驱线程的终止,每个线程等待前驱线程终止后,才从join()方法返回,  当线程终止时,会调用自身的no...

linux服务器部署jenkins笔记

安装jenkins参考文档:https://blog.csdn.net/tomatocc/article/details/83930714 1. 打开jenkins官网:https://jenkins.io/download/ 将war包下载到本地 **ps:**这里要注意的是要下载左边下方的war包,不要下载右边下面的war包。左边是稳定版本,右边是最新版本,建议大家使用稳定版本(我刚开始下载的...

k8s部署elasticsearch集群

百度营销大学     环境准备 我们使用的k8s和ceph环境见: https://blog.51cto.com/leejia/2495558 https://blog.51cto.com/leejia/2499684 ECK简介 Elastic Cloud on Kubernetes,这是一款基于 Kubernetes Operator 模式的新型编排产品,用户可使用该产品在...

猜你喜欢

saas-export项目-AdminLTE介绍与入门

AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? 提供一系列响应的、可重复使用的组件, 并内置了多个模板页面 自适应多种屏幕分辨率,兼容PC和移动端 快速的创建一个响应式的Html5网站 AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量 AdminLTE...

MyBatis中ResultMap结果集映射

用于解决属性名和字段名不一致的情况: resultMap 元素是 MyBatis 中最重要最强大的元素。...

编写一个shell

编写shell的过程: 1.从标准输入中读入一个字符串。 2.解析字符串 3.创建一个子进程的执行程序。 4.子进程程序替换。 5.父进程等待子进程退出。...

WEB自动化测试中Xpath定位方法

前言: Xpath是在XML文档中查找信息的一种语言,使用路径表达式来选取XML文档中的节点或节点集,由于XML与HTML结构类似(前者用于传输数据,后者用于显示数据),所以Xpath也常用于查找HTML文档中的节点或节点集。 一  路径表达式: 路径以“/”开始     表示找到满足该绝对路径的元素; 路径以//”开始  ...

力扣困难难度 第4题 寻找两个正序数组的中位数

先看一眼题 我的思路: 设置下标i,j分别用于遍历两个数组,初始值均为0,直到找到两个数组中从小到大的第第length/2个数为止结束循环,length为两个数组长度之和。 ·每次比较nums[i]nums[j],如果前者小则i++,否则j++ ·循环结束时,如果count已经达到length/2,则说明已经找到了中位数,[注意:此时有可能正好其中一个数组遍历完了!所以...