问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue基础问题

头像
see_8
    14523641

    刚开始做vue,想问一下如何点击获取标签元素的内容

    vue.js
    阅读 3.6k
    5 个回答
    得票最新
    头像
    小_u_酱
      516512
      <template>
<div v-on:click="getNode">
asd
</div>
</template>
<script>
methods: {
    getNode:function(that){
        console.log(that.currentTarget)
    }

}
</script>

      .currentTarget 获取到点击的dom元素；

      头像
      _hcat
        384125969
        <template>
<p>{{ test }}</p>
<input type="button" @click="show">
</template>
<script>
export default {
   data() {
        return {
            test: '12312312312'
        }
    },

    methods: {
        show() {
              alret(this.text)
        }
    }
}
</script>

        多看看文档，官方文档写的很清楚了。
        vue文档

        头像
        前段小狮子
          225
          <template>
<p ref="content">隨便寫點啥</p>
<input type="button" @click="show">
</template>
<script>
export default {
   data() {
        return {
            test: '12312312312'
        }
    },

    methods: {
        show() {
             console.log(this.$refs.content.innderHTML)
        }
    }
}
</script>

          可以去看看vue文檔裡面的ref介紹

          头像
          幼稚完
            3554

            @click + methods

            头像
            GreatAuk
              41753140
              <body class="body">
  <div id="app">
    <p @click="show1($event)">方法一</p>
    <p @click="show2" ref="text">方法二</p>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      methods: {
        show1(event) {
          console.log(event.target.innerHTML);
        },
        show2() {
          console.log(this.$refs.text.innerHTML);
        }
      }
    })
  </script>
</body>
              推荐问题