VUE（2）今日内容{插值语法、事件、属性、隐藏和显示、for循环}

最新推荐文章于 2024-02-01 17:54:39 发布
最新推荐文章于 2024-02-01 17:54:39 发布
阅读量186 收藏 1
点赞数
文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59684494/article/details/121691285
版权

插值语法: {{}}

  在html中书写, 主要出现在 双标签的内容区域, {{ JS代码... }}

<!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>
    <!-- DOM的痛点: 
      查询代码复杂 + 选择器书写繁琐 且 需要理清DOM元素之间的关系 -->

    <div id="app">
      <!-- 
        {{}}: 叫做 插值语法, Vue规定的格式, 类似于模板字符串的${} -->
      <h2>{{title}}</h2>
      <div>
        <div>
          <div>msg: {{msg}}</div>
          <div>{{word}}</div>
          <div>{{name}}</div>
          <div>{{skill}}</div>
        </div>
      </div>
    </div>

    <!-- vue.js 是开发版, 代码有错误 会在后台出现提示 -->
    <!-- vue.min.js 是生产版, 没有错误提示, 体积小, 适合上线时使用 -->
    <script src="./vendor/vue.js"></script>
    <script>
      // new Vue(): 创建Vue实例对象, Vue来自于 上方引入的脚本
      new Vue({
        // 对象类型中, 是vue相关配置项 -- 都是固定的名称
        // el: element元素;  值是选择器; 代表当前vue要管理哪个元素
        el: "#app",
        // data: 数据.  用途:凡是显示在页面上的数据 都放在此属性中
        /* Vue底层会自动搜索 el 指定元素中, 
           标签内容是{{}} 的. 就认为是Vue应该处理的变量, 进行对应的替换操作*/
        data: {
          title: "Hello Vue!",
          msg: "这是第一个vue代码",
          word: "Nice To meet you!",
          name: "亮亮",
          skill: "什么都没讲",
        },
      })
    </script>
  </body>
</html>

事件：

  • 旧写法, 由于复杂基本上不用: <el v-on:事件名="">

  • 新写法, 简单易用: <el @事件名=""/>

  • 默认参数: <el @click="函数" /> 注意函数不加()结尾

    • 默认会把 事件本身作为参数传入到函数中

  • 自定义参数: <el @click="函数(参数, 参数..., $event)"

    • 使用关键词 $event 来代表事件参数

事件:①

<!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">
      <div>{{msg}}</div>
      <!-- 原生语法: onclick -->
      <!-- 为了与原生区分, 使用 @ 代替 on -->
      <button @click="show1">点我1</button>
      <!-- 旧写法, 已淘汰. v-on:click -->
      <button v-on:click="show1">点我2</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      //语法糖介绍:
      let a = {
        // 最完整写法
        desc: function desc() {},
        //可以省略 function 关键词, 因为太长了
        desc1() {},
      }
      console.log(a)
      // 声明vue 管理 id='app' 的元素, 增加data. msg: 666
      var vm = new Vue({
        el: "#app",
        data: {
          msg: 666,
        },
        // methods(方法): 官方规定, 此属性中写 函数, 可以全局到处使用
        methods: {
          // 相当于:  show1: function(){}
          show1() {
            alert(1111)
            // 为 msg 变量 +1
            // this的指向: 普通函数的this指向运行时所在对象
            /* 此处: 要查看真正生成的 vue 对象结构,
               msg就是存储在vue对象中的.  所以采用 this.msg 来读取*/
            this.msg++
          },
        },
      })
      console.log(vm) //查看vue对象的样子
    </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>
    <div id="app">
      <p>选择你最喜欢的英雄: <b>{{hero}}</b></p>
      <button @click="doChoose">托儿索</button>
      <button @click="doChoose">儿童劫</button>
      <button @click="doChoose">小学僧</button>
      <button @click="doChoose">人头狗</button>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      // 创建 vue 对象, 管理 id='app' 元素,  hero默认值: '待定'
      new Vue({
        el: "#app",
        data: { hero: "待定" },
        methods: {
          // 参数名随意: 这叫形参, 习惯上是 e 或 event
          doChoose(event) {
            // 事件触发时, 默认带有参数: 事件本身的相关内容
            console.log(event)
            // target 就是触发当前事件的 DOM 元素
            let name = event.target.innerHTML
            this.hero = name // 把按钮上的名称 赋值给 hero 变量
          },
        },
      })
    </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>
    <div id="app">
      <p>数量: {{count}}</p>
      <!-- 注意: 默认写法 @click="changeCount" 此时事件本身会作为参数传递进入 -->
      <!-- 如果 自定义的传参, 官方提供了关键词: $event, 用来代表事件参数 -->
      <!-- Vue本身就对DOM进行了封装, 提倡的是 代码本身 0 DOM -->
      <!-- 所以传参的方式更加推荐, 不推荐使用DOM属性! -->
      <button data-delta="+1" @click="changeCount(+1, $event)">数量加1</button>
      <button data-delta="-1" @click="changeCount(-1, $event)">数量减1</button>
    </div>

    <script src="./vendor/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        // 此处是数字类型
        data: { count: 10 },
        methods: {
          // delta: 值是 -1 或 +1
          changeCount(delta, e) {
            console.log(e)
            this.count = this.count + delta
          },
        },
      })
    </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>
    <div id="app">
      <!-- {{}} 主要是双标签的内容 使用 -->
      <p>{{imgs[0]}}</p>
      <!-- 属性用特殊写法:  -->
      <!-- 旧写法, 基本不用 -->
      <img v-bind:src="imgs[0]" />
      <!-- 新写法:  :属性名="JS代码" -->
      <img :src="imgs[current]" />

      <button @click="goNext">下一张</button>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          imgs: ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"],
          current: 0, //当前序号
        },
        methods: {
          goNext() {
            this.current++
            // 取余: 4 %4 == 0,  超过最大序号 自然回到0
            // this.current %= 4
            // 用图片的个数作为 取余, 可以更加灵活.
            // 这样图片数组有变化, 此处的余数自然就会变化
            this.current %= this.imgs.length
          },
        },
      })
    </script>
  </body>
</html>

隐藏和显示

①：v-show:

值是true则显示, 值是false 则隐藏本质是利用 css 的display:none 实现隐藏

<!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">
      <!-- css 隐藏元素: 通过 display -->
      <p style="display: none">这是一段消息</p>
      <!-- show: 显示,呈现 -->
      <p v-show="show">这是一段消息</p>
      <button @click="doShow">显示</button>
      <button @click="doHide">隐藏</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        // show: 代表是否要显示
        data: { show: true },
        methods: {
          doShow() {
            this.show = true
          },
          doHide() {
            this.show = false
          },
        },
      })
    </script>
  </body>
</html>

②：v-if, v-else, v-else-if:

条件真则添加DOM元素, 添加假则移除DOM元素

<!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>
    <!-- v-if: 条件为真, 加载元素; 条件为假, 删除元素 -->
      <!-- v-if 利用删除或添加DOM元素实现隐藏/显示. -->
      <!-- v-show性能高,推荐;  v-if要删DOM,性能低,不推荐 -->
    <!-- if...else... -->
    <div id="app">
      <p>张三的面试分数: {{score}}</p>
      <!-- v-show: true显示 false隐藏 -->
      <button @click="changeScore(-10)" v-show="score>0">-10</button>
      <button @click="changeScore(+10)" v-show="score<100">+10</button>
      <!-- if ... else ...: 满足条件显示xxx 否则显示xxx -->
      <p v-if="score>=60">及格</p>
      <p v-else>不及格</p>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { score: 60 },
        methods: {
          changeScore(delta) {
            this.score += delta
          },
        },
      })
    </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>
    <!-- if...elseif...elseif...else... -->
    <div id="app">
      <p>小亮的考试分数: {{score}}</p>
      <button @click="changeScore(-10)" :disabled="score==0">-10</button>
      <button @click="changeScore(+10)" :disabled="score==100">+10</button>
      <!-- 不同的条件 加载不同的DOM元素 -->
      <p v-if="score==100">Perfect!</p>
      <p v-else-if="score>=90">优秀</p>
      <p v-else-if="score>=80">良好</p>
      <p v-else-if="score>=60">及格</p>
      <p v-else>不及格</p>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { score: 60 },
        methods: {
          changeScore(delta) {
            this.score += delta
          },
        },
      })
    </script>
  </body>
</html>

for循环

of 和 in 关键词 效果一样, 没任何区别, 挑喜欢的

  • <el v-for="item of 数组/对象"

  • 带有序号: <el v-for="(item,index) in 数组/对象"

<!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">
      <ul>
        <!-- 回顾遍历数组:  for (let item of names) { } -->
        <!-- 写在哪个元素上, 就可以遍历生成此元素 -->
        <!-- of 写成in  效果相同 -->
        <li v-for="item of names">{{item}}</li>
        <!-- 练习: -->
        <div v-for="abc of names">{{abc}}</div>
        <p v-for="x in names">{{x}}</p>
        <h4></h4>
      </ul>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          names: ["欧豪", "小名", "暗暗", "尼古拉是"],
        },
      })
    </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>
    <div id="app">
      <ul>
        <!-- 可以写 (item,index) 就代表 元素 和 序号 -->
        <li v-for="(item,index) in names">
          <b>{{index}}</b>
          <span>.{{item}}</span>
        </li>
        <!-- 遍历对象: in 和 of 效果一致; 挑你喜欢的 -->
        <li v-for="(item,index) of emp">
          <b>{{index}}</b>
          <span>{{item}}</span>
        </li>
      </ul>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          names: ["欧豪", "小名", "暗暗", "尼古拉是","张三"],
          emp: { name: "尼古拉是", age: 44, phone: "18799887788" },
        },
      })
    </script>
  </body>
</html>

！没事
关注
vue2学习笔记4 - 深入学习模板语法：插值语法和指令语法
l_q_l的专栏
07-15 873
1、插值语法：功能：用于解析标签体内容。写法：{{xxxx}}，其中xxxx是js表达式，且可以直接读取到data中的所有属性。2、指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）示例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????。
Vue02基础语法-插值+过滤器+计算属性+计算属性
全栈
10-17 652
努力是为了不平庸~Vue.js 使用了的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。1.1 插值。
2.Vue的插值语法
qq_42392049的博客
05-13 620
1.Vue的插值语法 插值语法是通过{{}}进行书写，内部是对data数据管理中的属性进行渲染，也可以是表达式 moustache(胡子)是对大括号的学名，也叫（胡子语法） 实例 内部也可以存放表达式 {{a>=100 ? 20 :10}} 表达式要尽量简单，比如简单判断，不可以用if语句 ...
Vue插值表达式及常用指令
最新发布
qq_44741577的博客
02-01 2173
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
vue中控制v-for循环出来的某一个列表项的显示隐藏切换
CXJ_9280的博客
06-18 7135
第一种方法：通过给每条数据添加字段的方法 给每一项点击的地方添加一个点击事件，把当前的列表项作为参数传递过去 在methods里面写点击事件： 首先判断列表项有没有这个字段，没有的话就通过this.$set添加字段，然后进行取反，有这个字段的话直接取反。 this.$set(你要添加数据的数组或对象, '字段名称', 字段值) 最后通过v-show控制代码块的显示隐藏 ...
Vue控制表格的某行/某列显示和隐藏（通用）
chenfengdong的博客
04-19 5626
需求描述： 想做一个点击按钮可以隐藏表格的某个字段 也可以是根据权限控制某列中显示与隐藏 效果： 全部的表格效果， 点击第一个 参考代码： 场景：根据不同用户（普通用户，vip用户），展示对应的列 思路：将原来的columns copy一份，然后根据权限去让它过滤对应的列，就能返回最新的columns了 created() { userType(type) { // type: 1 普通用户 2 vip用户 如果是普通用户则不能看到 couponAble
vue中v-for循环给标签属性赋值的方法
10-17
5. 使用v-for时，确保不要在DOM属性中错误地使用Vue模板插值语法{{}}。 理解并掌握这些知识点对于使用Vue进行前端开发是非常重要的，它能够帮助开发者更高效地创建动态用户界面。对于希望更深入了解Vue.js和其指令...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
综上所述，通过这篇文章，我们可以了解到在Vue项目中使用v-for循环渲染图片列表时，需要注意图片资源的存放位置、正确的路径引用方式，以及Vue中动态绑定src属性的正确语法。这些知识点对于开发一个性能良好且维护性...
Vue——插值操作 、动态绑定属性
鹿蹊zz的博客
07-26 2055
​mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。​在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。
Vue的基础知识之插值操作
Chil_G的博客
09-08 1692
1、Vue是一个渐进式框架
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 一、插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello Vue! } }) 由于插值表达式的语法是{{}} 因而也被称为mustache胡子
vue显示/隐藏
Holly1945的博客
06-16 5212
v-if vs v-show v-if 是真正的条件渲染，会在切换的过程中，条件块内的事件监听器和子组件适当地被销毁和重建。 惰性： 初始渲染条件为假时，什么也不会做。 v-show： 不管什么初始条件都会渲染，只是简单基于css display 属性切换。 v-if 有更高的开销，v-show有更高的初始渲染开销。 使用场景： 频繁切换，v-show 运行条件很少改变，使用v-if display：none； 元素存在，不占位，不显示 visible: hidden; 元素存在，占位，不显示 height
vue 隐藏部分V-for，达到显示前两条，点击后再显示更多的效果
Technology_hands的博客
05-31 603
很简单其实就是外面一个v-for，里面一个span,然后给v-show，当index是0或1就一直显示，然后用或者（||）连接，剩下的就由按钮控制，点击了按钮就显示所有的了。
vue基础 - 01 （插值语法、事件绑定、属性绑定、显示/隐藏v-show、v-if 、v-else、v-else-if 、for、html和text、遮罩 / 隐藏、pre、v-once）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-03 447
1、插值语法 {{ }}：插值语法，相当于模板字符串的${ }，其中书写的代码都是JS代码，书写在双标签内容里 2、事件绑定 旧写法：v-on:事件名="" 新写法：@代替on @事件名="" 默认参数：事件触发时，默认带有参数：事件本身的相关内容，一般写event <el @click="函数" /> event.target：就是当前事件触发的DOM元素 ...
vue2元素显示隐藏v-if与v-show
qq_56378849的博客
06-13 842
【代码】vue2元素显示隐藏v-if与v-show。
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui ) TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）
热门推荐
wocwin的博客
12-06 1万+
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）
vue for循环中点击显示与隐藏部分数据（独立控制）
qq_42979106的博客
02-10 1799
vue for循环中点击显示与隐藏部分数据（独立控制）
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
weixin_45453560的博客
07-29 7150
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验
铁锤妹妹的博客
07-12 6508
有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。
Vue基础教程：Day02 模板语法与v-for的key属性解析
"Vue基础知识，包括模板语法的插值操作，如v-html、v-text、v-pre和v-cloak的使用，以及v-for中key属性的重要性和作用。" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Day02的Vue基础知识中，主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值