精华内容
下载资源
问答
  • 【Vue-day1】Vue获取Html标签中的值
    2022-03-03 16:35:24

    方法1:在自定义函数中加上$event,在js函数中可以获取到点击事件的标签,从而获取对应标签的值,易于分离。

    Html代码:

    <a href="javascript:;" @click="getCity($event)">北京</a>
    
    

    Js代码:

    getCity:function(event){
    
            console.log(event.target.innerHTML);
    
    }

    方法2:vue的ref和$refs方法(在Js中test不知道如何分离多个a标签,只能输出所有ref中的值)

    Html代码:

    <a href="javascript:;" ref="test">北京</a>

    Js代码:

    getCity:function(event){
    
            console.log(this.$refs.test);
    
    }

     

     

    更多相关内容
  • 目的:vue获取 wangeditor 的 html 和 text。 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目...
  • vue 获取HTML源码

    千次阅读 2019-10-22 17:52:52
    参考资料:https://www.jianshu.com/p/f6f3f00cd923 <template> <div id="pp" @click="printDom"> <tit01 /> <base01 /> <list01 /> <floor01 />.../div>...

    参考资料:https://www.jianshu.com/p/f6f3f00cd923

    <template>
      <div id="pp" @click="printDom">
        <tit01 />
        <base01 />
        <list01 />
        <floor01 /
    展开全文
  • 21 Vue获取页面元素

    千次阅读 2020-02-20 20:33:47
    vue中使用ref可以获取Dom元素和组件

    Vue获取页面元素

    vue中使用ref可以获取Dom元素和组件,如下:

    <body>
        <div id="app">
            <input type="button" value="获取元素" @click="getElement">
            <login ref="mylogin"></login>
            <h3 ref="myh3">hello</h3>
        </div>
        <script>
            var login = {
                template: "<h1>登录组件</h1>",
                data() {
                    return {
                        msg: "hello component"
                    }
                },
            }
            var vm = new Vue({
                el: "#app",
                data: {
    
                },
                methods: {
                    getElement() {
                        // 通过ref获取Dom元素
                        console.log(this.$refs.myh3.innerText);
                        // 通过ref获取组件
                        console.log(this.$refs.mylogin.msg);
                    }
                },
                components: {
                    login
                }
            })
        </script>
    </body>
    
    

    获取组件之后,可以展示组件中的数据,使用组件中的方法,从这一点看来很有意义!

    展开全文
  • vue基于html5plus的微信授权登录、获取微信用户信息代码,里面是一个vue文件,放进项目就能用
  • Vue获取页面元素的相对位置

    千次阅读 2021-01-15 20:21:00
    发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题发现问题当我滚动...

    今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题

    发现问题

    当我滚动到元素的位置时候,我想把元素固定在头部

    // html 结构

    • 首页推荐
    • 最新发布

    export default {

    data(){

    return {

    isFixed:false,

    }

    },

    mounted(){

    if(this.$refs.subnav.getBoundingClientRect){

    this.scrollTop(this.$refs.subnav.getBoundingClientRect())

    }

    },

    methods:{

    // 这是封装的一个方法

    scrollTop(h){

    console.log(h);

    this.utils.scrollTop((res)=>{

    this.isFixed = res.scrollH > h ? true :false;

    })

    }

    }

    }

    utils.js

    // 该函数主要功能返回,滚动的高度以及文档占比窗口高度的百分比

    utils.scrollTop 

    展开全文
  • vue 获取动态元素高度

    千次阅读 2020-12-19 18:26:11
    2017.10.25凌晨坑死了~因为要在页面中搞一个区域用来scroll列表,所以必须要获取scroll-wrap的高度,于是想尽办法获取swipe、navbarBox的高度我在mounted里写百度上找到的方法,都没用。。。这是别人成功例子,但是...
  • vue 获取页面路径中的参数(h5)

    千次阅读 2020-12-25 14:03:43
    今天要做一个h5页面,用来打开app的,现在要获取url带的参数 created() { const queryUrl = this.getRequest() let urlParams = Object.assign(queryUrl, this.$route.query) //参数合并 if (urlParams.id) {//id是...
  • vue获取参数的几种方式

    千次阅读 2022-01-13 21:18:54
    SPA(single-page application),只有一个HTML页面,通过路由实现页面内的局部切换,公共资源部分只加载一次。、 我们熟知的JS框架如react,vue,angular,ember都属于SPA。 1.1.2 什么是MPA(多页面应用) 平常写的...
  • }, } 方法二: 使用vue插件 element-resize-detector 第一步:安装 npm uninstall element-resize-detector 第二步:引入 第三步:使用 export default { data(){ return{ windowHeight:null, windowWidth:null, }...
  • VUE获取屏幕高度

    千次阅读 2020-08-18 09:39:36
    1.HTML 2.JS data() { return { clientHeight: '', ... // 获取浏览器可视区域高度 this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth; //console.log(self.cli
  • 今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue获取屏幕宽高

    2022-02-25 19:20:10
    vue获取屏幕宽高,用来适配是屏幕的大小 screenWidth: document.body.clientWidth, // 屏幕宽 screeHeight: document.body.clientHeight, // 屏幕高
  • vue 获取当前路由地址

    千次阅读 2022-01-14 18:17:32
    vue 获取当前路由地址 1、router和$route的区别 $router: 路由操作对象,只写。需要对路由进行操作时使用。如路由跳转 $route: 路由信息对象,只读。获取路由相关信息时使用。如获取当前路由地址 2、获取当前路由...
  • Vue获取元素高度

    2022-01-09 15:21:34
    // 当前区域 <div ref="element"></div> // 获取高度值 (内容高+padding+边框) let height= this.$refs.element.offsetHeight;...//获取元素内联样式值(非内联样式无法获取) let height...
  • vue页面转pdf

    2019-05-06 10:06:40
    该文件为vuehtml转化为pdf的代码,内容详细可以直接拿过来使用
  • Vue为v-html中标签添加CSS样式 <h2 class=title>{{news.title}} <p class=news-time>{{news.datetime}} <div class=con v-html=news.dec> <button class=back @click=goBack()>返回列表</...
  • 发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题发现问题当我滚动...
  • 首先我这里的需求呢, 是获取当前用户的经纬度 ...然后 去你需要获取页面 开始写, 我这里拿来测试用,所以只有一个App.vue 文件。 貌似已经 很详细了。 通过调用谷歌的api 可以实现 准确定位, function onComple
  • 获取vue页面内容转为html格式

    千次阅读 2020-05-10 13:03:47
    找到需要转换的页面 用innerHTML 转换 需要在组件标签上加上ref 属性 像这样 <Child class="testDemo" ref="child"></Child> this.$refs[child].$el.innerHTML // 或者 this.$refs.child.$el....
  • 1.window.location console.log(location); 获取当前的url:location.href 获取当前的端口号:location.port 等
  • vue 获取天气情况

    2021-09-26 17:20:13
    vue 查询当地天气 输入城市名即可 this.$axios .get("http://wthrcdn.etouch.cn/weather_mini?city=城市") .then((response) => { console.log(response.data.data); }) .catch(function (error) { ...
  • 今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue获取页面窗口宽度高度

    千次阅读 2021-07-05 17:25:58
    Vue获取页面窗口高度宽度 mounted() { window.onresize = function () { console.log("宽度", document.documentElement.clientWidth); console.log("高度", document.documentElement.clientHeight); }; },...
  • vue动态实时获取页面高度

    千次阅读 2020-09-30 12:18:13
    动态获取实时页面高度 ...//获取页面滚动高度 methods:{ scrollHandle(e){ let top = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度 console.log(top); } } 此代码为转载,来自简书 原文:h
  • document.getelement之类的语句来操作dom;api,用 ref 来获取节点...标记名来获取元素代码:document{{ message }}new Vue({el: '#app',data() {return {message: 'hello 肾虚少年'}},mounted() {alert(this.$refs.p...
  • 今天记录一下 vue获取从后台读取到的html代码中img的src的方法 <div ref="desc" v-html="content" @click="getimgsrc" :class="isclic>1?'mask':''"> </div> getimgsrc: function (e) { if (e....
  • // 获取滚动条的滚动距离 handleScroll() { console.log(this.$refs.scorll_top.getBoundingClientRect().top); }, 注意这里:ref一定要写在div上,写在组件上面会报错

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,357
精华内容 31,342
关键字:

vue获取页面html