首页 > 其他分享 >vue.js怎么获取某个dom元素的值

vue.js怎么获取某个dom元素的值

时间:2023-02-26 11:44:57浏览次数:53  
标签:el vue dom 元素 js Vue

vue.js获取某个dom元素值的方法:1、在【vue.js1.0】版本可以通过【v-el】来取得dom元素;2、在【Vue.js2.0】版本使用ref属性来标识一个元素。

本教程操作环境:windows10系统、vue2.5.2,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js】

vue.js获取某个dom元素值的方法:

1、vue.js1.0版本

可以通过:v-el 来取得dom元素

例如:

html代码:

<input type="text" name="xxx" id="xxx" v-el:sxx />
            <button @click="ok()">确定</button>

js代码:

var vm = new Vue({
    el: '#app',
    methods: {
        ok() {
           var xx = this.$els.sxx.value;
           console.log(xx);
        }
    }
});

  

 2、Vue.js2.0版本

Vue.js 2.0使用了 ref 替换掉了 v-el和v-ref,使用 ref 属性来标识一个元素。 .

我们写的时候就变成了

<input type="text" name="xxx" id="xxx" ref='sxx' />
<button @click="ok()">确定</button>

  调用时还是一样的

var vm = new Vue({
    el: '#app',
    methods: {
        ok() {
           var xx = this.$refs.sxx.value;
           console.log(xx);
        }
    }
});

  相关免费学习推荐:JavaScript(视频)

 以上就是vue.js怎么获取某个dom元素的值的详细内容,更多请关注gxlsystem.com其它相关文章!

 

 转自:vue.js怎么获取某个dom元素的值 (gxlsystem.com)

 

标签:el,vue,dom,元素,js,Vue
From: https://www.cnblogs.com/wwssgg/p/17156353.html

相关文章

  • Vue mixin混入的介绍
    功能:可以把多个组件共用的配置提取成一个混入对象使用方式:1、第一步:定义混合,例如:2、第二步:使用混合(全局混合和局部混合)(1)局部混合mixins:['XXX']  (2)全局混合Vue......
  • vuex中getters的两种调用方法
    getters和state用法相似,有点像vue中里面的data和computed两个之间的关系 使用: 方法一:this.$store.getters.xxx xxx是getters里面的名称方法二: ......
  • Springboot中报错nested exception is com.alibaba.fastjson.JSONException: can not
    首先说明一下json的格式区别。先讲一下什么是json数据在名称/值对中数据由逗号 , 分隔使用斜杆 \ 来转义字符大括号 {} 保存对象中括号 [] 保存数组,数组可......
  • vue路由守卫并向后台发送token
    vue代码//全局路由首位;当路由发生异常首先执行的方法router.beforeEach((to,from,next)=>{//是否被认证varisAuthenticated=false;//1.从localStorage......
  • VUEX mapActions 和 mapMutations
     不使用mapActions和mapMutations的代码要用的地方字体放大了<template><divid="app"><h1>当前总数为:{{nbr}}</h1><h2>放大十倍总数为:{{bigSum}}......
  • VUEX getters 配置项
      获取bigSum<template><divid="app"><h1>当前总数为:{{$store.state.nbr}}</h1><h2>放大十倍总数为:{{$store.getters.bigSum}}</h2><select......
  • VUEX mapState 和 mapGetters的使用
       mapState:首先要在使用sore文件的文件引入:import{mapState}from'vuex';在js;红色的是用到的mapState可以自动生成计算属性   <script>import{mapState,m......
  • 常见js混淆
    js混淆是把原本可读性比较高的代码,用另外一种或者几种代码进行替换,降低代码的可读性,但是执行效果又等同常见混淆字符串转十六进制、unicode编码//字符串转ASCII码co......
  • vue点击按钮后倒计时
    vue代码<template><div><!--点击按钮后倒计时--><el-button@click="signUp_asd"type="success":disabled="!show">获取验证码<spanv-s......
  • vue中获取网址上的参数
    vue代码<template><div><h4>http://localhost:8080/#/test?levels=level1-1</h4><h4>获取levels1-1</h4>levels={{levels}}</div></template><......