小编Tiế*_*ang的帖子

访问挂载的 VueJS 中的数据

我正在尝试使用 Vuejs 创建简单的应用程序,该应用程序将检查标题标签 (px) 的长度。

在安装内部,我设置了标题的默认值并运行检查默认标题标签的长度,但它返回 0。当我更改输入值时,它工作正常。

这是我的代码。链接:https : //codepen.io/mrtienhp97/pen/LeOzGa

HTML:

<div id="app">
   <input v-model="title" @input="titleCheck()">

  <div id="title-preview">{{title}}</div>

  <div class="message">{{message}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

#title-preview {
  display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)

JS:

new Vue({
  el: '#app',
  data: {
    title: '',
    message: ''
  },
  mounted: function() {
    this.$nextTick(function () {
      this.title = "Default Title";
      var title_width = document.getElementById("title-preview").offsetWidth;
      this.message = title_width + 'px';
    });
  },
  methods: {
    titleCheck: function() {
      var title_width = document.getElementById("title-preview").offsetWidth;
      this.message = title_width + 'px';
    }
  }
})
Run Code Online (Sandbox Code Playgroud)

谁能帮我改正?

javascript vue.js

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×1

vue.js ×1