入门:Vue六大常用内置指令

入门:Vue六大常用内置指令,第1张

指令(Directives),是vue为开发者提供的 模板语法 ,用于辅助开发者渲染页面的基本结构

所用到的数据定义在实例的 data 中,事件定义在实例的 methods

只能渲染纯文本内容 会覆盖 标签内部原本的内容

只能渲染纯文本内容, 不会覆盖 标签内部原本的内容

能将带标签的字符串渲染成html内容, 会覆盖 标签内部原本的内容

为元素的属性 动态 绑定属性值

注意: 插值表达式 v-bind 还支持javascript表达式的运算

为元素绑定事件

只要是事件,就能使用的修饰符,以下列举5个常用的

只能在触发键盘事件时,使用的修饰符,以下列举2个常用的

快速获取表单数据(只应用于表单元素,如:input、textarea、select)

只能给v-model使用的修饰符

控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态添加/移除display:none样式 ,一般用于需频繁切换

控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态创建/移除元素 ,一般用于默认不展示且展示较少

配合 v-if 指令一起使用,否则将不会被识别

基于一个数组来循环渲染一个列表结构,它有特定的语法结构 v-for="item in items"

注意:在vue文件中,只要用到 v-for指令 ,一定要绑定一个 :key 属性


作者:用户2031777005900
链接:>1点击某个标签,滚动到某个具体位置

    switchHeight(num) {

        thisselectNum = num;

        if (num == 0) {

          documentgetElementById("identifer_one")scrollIntoView();

        } else {

          documentgetElementById("hotel_two")scrollIntoView();

        }

      },

2获取滚动高度,

 首先要先写监听事件:

  mounted() {

      windowaddEventListener("scroll", thishandleScroll, true); //监听滚动事件

    },

处理监听事件:etargetscrollTop是目标对象的滚动高度

handleScroll(e) {

        let serviceTop = 44;

        let hotelTop = 344;

        if (etargetscrollTop > 44 && etargetscrollTop < 344) {

          thisselectNum = 0;

        }

        if (etargetscrollTop > 344) {

          thisselectNum = 1;

        }

      }

    },

最近项目里需要用到下拉框来动态获取年份,网上找的时候大部分都是js写的,这里记录下用vue来实现。

项目需求:下拉框动态获取年份
项目环境:vue + vue cli +element-ui + select选择器

最终效果:

我们先看看通过接口回来的数据

其中,defaultType是需要回显的内容,即原选定的分类

需要保证select下拉的ID和v-model里边的id保持一致


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13400689.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存