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

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代码:

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

js代码:

1
2
3
4
5
6
7
8
9
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 属性来标识一个元素。 .

我们写的时候就变成了

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

  调用时还是一样的

1
2
3
4
5
6
7
8
9
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)

 

posted @   信铁寒胜  阅读(697)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
历史上的今天:
2021-02-26 WPS文档按回车键不能换行怎么解决
2021-02-26 正则表达式截取数字
点击右上角即可分享
微信分享提示