Vue 中 如何取得某元素的值

在vue页面中，我们想得到某一个元素的内容时，可以用ref 与 $refs 来进行页面的值获取的过程。首先我们来测试一下

 

<div style="box-shadow:0px 0px 10px 0px #aaa;position:fixed; top:0px;left: 0; width: 100%">
        <el-menu
          :default-active="active"
          class="el-menu-demo"
          mode="horizontal">
          <div class="logo"><div class="logo2"></div></div>
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu :model="ruleFrom" class=" " style="float: right;padding-right: 60px;" index="2">
            <template slot="title">
              <el-avatar><span ref="username">{{ query.username }}</span></el-avatar></template>
            <el-menu-item index="2-1">个人设置</el-menu-item>
            <el-menu-item index="2-2">退出账户</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" disabled :title="test">消息中心</el-menu-item>
          <el-menu-item index="4" >订单管理</el-menu-item>
        </el-menu>
      </div>

      <el-button @click="select()"> test </el-button>

上面的

<el-avatar><span ref="username">{{ query.username }}</span></el-avatar></template>

内容我设置了ref参数。这是定义一个名称。能保证在后续过程中$refs能够找到这一个dom。

 

data() {
      return {
        ruleFrom: {
          username: ""
        },
        query:{
          username: this.$route.query.userName,
          userid: this.$route.query.userId,
          userpassword: this.$route.query.userPassword,
          userschool: this.$route.query.userSchool,
          userrole: this.$route.query.userRole
        },
        active: "1",
        test: "已禁用！",
        url: "../images/Logo.png"
      }
    },
    methods:{
      // 获取某元素标签内的东西
      select() {
        console.log(this.$refs.username);
      }
    }

上叙代码中我没有全部给全，实在

export default {}的方法中实现的。

来我们看一下效果图

 

得到了dom。然后在优化一下。利用获取的过程dom的特性。可以在后面加上innerHTML来获取值，如下：

this.$refs.username.innerHTML

 

over！