精华内容
下载资源
问答
  • vue向一个div添加内容,让div的滚动条自动滚动到底部
    千次阅读
    2021-02-04 15:30:35
    var div=t.$refs.newsBox;
    div.scrollTop = div.scrollHeight;
    

    如果需要异步的话可以加上setTimeout

    更多相关内容
  • vue项目中在可编辑div光标位置插入内容 html: <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div ...
  • 主要介绍了vue实现给div绑定keyup的enter事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue给div添加自定义的v-on事件,非组件

    千次阅读 2020-09-29 16:38:02
    vue通常都是在父子组件中,v-on和emit配对使用,我们都知道v-on:click是可以直接使用的.如下: <div @click="getNumber"></div> 那如果,我想加个@left事件(如下),按键盘的左箭头的时候打印一个随机数,需要...

    vue通常都是在父子组件中,v-on和emit配对使用,我们都知道v-on:click是可以直接使用的.如下:
    <div @click="getNumber"></div>
    那如果,我想加个@left事件(如下),按键盘的左箭头的时候打印一个随机数,需要怎么做呢?

    <div ref="left" @left="getNumber">left</div>
    methods: {
        getNumber() {
          console.log(Math.random());
        }
    }

    思路分析:
    首先我们了解下如何自定义事件,以及触发自定义事件.一个小例子说明

    document.addEventListener('left', function(event) {
      console.log(event);
    })
    
    document.onkeydown = (e) => {
      const keyCode = window.event ? (window.event as any).keyCode : e.which;
      if(keyCode === 37) {
        document.dispatchEvent(new CustomEvent('left', {detail: {a:1}}));
      }
    }

    说明:上面代码为document绑定了一个left事件了,按键盘左箭头的时候触发这个事件,并且打印CustomEvent信息
     

    好了现在我们回到主题,在vue中自定义left事件,首先我们要知道的是,在vue中,在div上添加自定义的@left,vue会自动绑定到当前的el上,即el.addEventListener('left',...),我们所需要做的就是触发这个事件就行,代码如下

    <div ref="left" @left="getNumber">left</div>
    
    created() {
        document.onkeydown = (e) => {
          const keyCode = window.event ? (window.event as any).keyCode : e.which;
          if(keyCode === 37) {
              this.$refs.left.dispatchEvent(new CustomEvent('left'));
          }
        }
    },
    methods: {
        getNumber() {
            console.log(Math.random());
        }
    }

    此时在浏览器中按左箭头建就可以打印出随机数啦

     

     

     


     

    展开全文
  • vue给div添加disabled功能 给div添加一个disabled的功能,不能对其进行点击各种操作。 <div class="disFunc"> ... </div> .disFunc { pointer-events: none; }

    vue中给div添加disabled功能

    给div添加一个disabled的功能,不能对其进行点击各种操作。

    <div class="disFunc">
        ...
    </div>
    
    .disFunc {
        pointer-events: none;
    }
    
    展开全文
  • div盒子上设立:style=" 'background-image:url('+url+');' " url是背景图片的路径 <div v-for="(item,index) in brandList" :key="index" :style="'background-image:url('+item.new_pic_url+');'"> ...

    在div盒子上设立:style=" 'background-image:url('+url+');' "

    url是背景图片的路径

    <div 
    v-for="(item,index) in brandList" 
    :key="index" 
    :style="'background-image:url('+item.new_pic_url+');'">
            <p>{{item.name}}</p>
            <p>¥{{item.floor_price}}元起</p>
    </div>

    设置css样式

    div{
        background-size: 100% 100%;
        margin: 5px;
        display: inline-block;
        width: 47%;
        height: 128px;
        p{
          text-align: left;
          margin-left: 10px;
          font-size: 15px;
          color: #666666;
        }
      }

    background-size: 100% 100%; 是背景图片的大小

    div盒子的宽高设置完后 直接给background-size背景图片大小宽高100%

    就可以了!

    展开全文
  • vue怎么给div绑定blur事件

    千次阅读 2020-12-24 15:37:41
    网上看到div本身没有blur事件,需要添加属性tabIndex后方可用blur,试了但是依然没有用。请问各位前辈有好的方法吗?<template><div class="dropdown" :tabIndex='1' @blur="alert(1)"><...
  • vue 添加样式分几种方法

    千次阅读 2020-12-19 23:54:46
    一.new Vue({el: '#app',data: {isActive: true}})二.v-bind:class="{ active: isActive, 'text-danger': hasError }">new Vue({el: '#app',data: {isActive: true,hasError: true}})三..active {width: 100px;...
  • vue 动态添加div

    千次阅读 2020-03-18 14:11:17
    div v-for="(item,index) in editSchProps" :key="index" > <el-form-item :label="item.code+'编码'" prop="code" :rules="userRules"> <el-input v-model="item.code" :maxlength="10...
  • vue中动态添加div

    千次阅读 2019-01-19 18:12:00
    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: 核心代码说明(样式...
  • vue 给div增加title属性

    千次阅读 2021-01-29 15:11:35
    div等标签也可以加tooltip,将el-button的那行代码换成自己显示的就可以啦 效果: 第二种是给div增加title属性,这种方法的话个人感觉会更容易让人接收 上代码 我是一个内容 这样子的话页面上只会显示“我是一个内容...
  • vue循环遍历给div添加id

    千次阅读 2018-07-11 14:51:00
    <div class="img-preview" v-for="(img,i) of list" :key="img.imageKey" v-on:mouseenter="changeActive(i+1)" v-on:mouseleave="removeActive(i+1)" :id="i+1">... //这样就循环出来的div添加了不同的id ...
  • vue-给div添加渐变颜色

    万次阅读 2019-06-14 22:00:32
    vue-给div添加渐变颜色 第一步:先写一个div并它设置一个类名(class),我的这个div的类名为class=“www” 第二步:定义div的宽与高,并设置颜色渐变 background: -webkit-linear-gradient(bottom,hsla(0,0%,59...
  • Vue动态添加删除div

    万次阅读 2019-09-18 11:37:18
    效果图 完整源码 <...div class="boxShadow"> <div> <el-button style="width:90px; font-size: 12px">全部扫描</el-button> <el-button style="width:90px; fo...
  • vue中点击按钮添加一个div

    千次阅读 2021-12-15 10:01:37
    点击按钮添加一次div里面包含多个字段 <template> <div> <van-form ref="householderForm" @submit="add" @failed="uploadFailed"> <div> <van-field required maxlength=
  • 业务需求(vue项目中) 1.页面展示svg内容 ...3.动态改变svg内部元素的属性和值 ...直接将svg文件的内容复制粘贴到.vue文件里,是可以在标签内直接添加@click事件完成需求的,方式简单但会造成文件过长,本文
  • vue奇数行div添加class属性

    千次阅读 2018-02-09 16:42:45
    首先想到的是用vue中的v-if-else标签,来判断奇偶数行来进行判断添加属性,结果没成功,这个标签只会实现满足条件后显示与消失 2.这里应该绑定class属性,进行判断,若满足条件即该class属性实现,下面贴出代码 ...
  • Vue下我们可以事件一个修饰符,采用Vue全局config对象来添加, 例如:Vue.config.keyCodes['Left'] = 37 我们通过一个例子来看看如何实现 Vue div 自定义键盘事件以及键盘修饰符 <!DOCTYPE html> ...
  • VUE实现DIV点击换色

    千次阅读 2021-01-06 22:14:58
    这个方法初衷是为了代替button做一个更加自由添加图标标题之类的按钮来代替tab页签,所以后续还可以绑定一些自己的事件,如跳转页面,窗口弹出. 先写DIV和CSS样式. <template> <div> <div class=...
  • vue如何组件加css样式

    千次阅读 2021-03-18 14:55:37
    vue给组件加css样式的方法:首先在【.vue】文件中设置相关代码;然后新建【index.js】文件,并建立对应的【record.scss】文件即可。本教程操作环境:windows7系统、Vue2.9.6版,Dell G3电脑。【相关文章推荐:vue.js...
  • 给div添加滚动条

    千次阅读 2019-06-04 09:56:51
    div style="height:300px;width:100px;overflow:auto"><div/>(height和width根据需求设定)   注意:如果只写height就只有垂直滚动条,只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置...
  • 如何用vue动态的添加与生成元素?

    千次阅读 2020-12-19 16:53:37
    思路就是用数组配和v-for就行了html布局//控制input框个数的input框@blur="createInp"style="width: 200px">//指定个数的input框:key="idx"v-model="inpArr[idx]...创建Div//div生成class="img-box">clas...
  • Vue】使用Vue实现div收缩效果

    千次阅读 2019-09-10 10:46:38
    本文原文地址:Microanswer的博客【Vue】使用Vue实现div收缩效果。 一、效果展示 你看到的边框只是为了演示效果需要,实际组件是不会有任何内容的,它只提供收缩功能。此处内容可以是任何内容,组件会自动根据内容...
  • div class="h-edit-head-content-title edit-div" contenteditable="true" v-text="content" @input="changeText" @focus="isLocked = true" @blur="isLocked = false" > </div> </template> &...
  • vue.js div 设置背景图片

    万次阅读 2018-08-10 17:21:20
    div class="middle" :style="backgroundDiv"&gt; &lt;img src="./images/aibtn@3x.png" style="width: auto; height: 40px;"&gt; &lt;/div&gt; 数据...
  • vuediv@click不起作用

    千次阅读 2021-09-08 15:43:03
    vuediv@click不起作用 前提,一个外层div,样式:position: relative;,设置了点击事件@click 里面用了position: absolute;绝对定位,之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比...
  • 1.首先在所需要隐藏或显示的内容div加v-show,代表判断是否显示或隐藏 <div v-show="shopShow">内容</div> 3.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件 &...
  • vue给元素动态添加class

    千次阅读 2017-09-22 14:34:00
    <p class="answerNum2" v-text="iteme.sel_num" :class="{letter: num }"&... //自定义,如果num为true,添加letter <p class="answerNum2" v-text="iteme.sel_num" :class="{letter: iteme.sel_num == iteme...
  • vue绑定div鼠标移入移出事件

    千次阅读 2021-11-16 15:17:40
    div v-on:mouseover="handleOver($event)" v-on:mouseout="handleOut($event)"></div> <div @mouseover="mouseOver" @mouseleave="mouseLeave"></div> handleOver (e) { console.log('移...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,169
精华内容 36,067
关键字:

vue给div添加内容