如何在 vue.js 脚本中访问“Id”

Question

我正在尝试使用“this.$refs.cm_count.innerText”在 vue.js 脚本中访问此 id="cm_count"，但我无法获得所需的输出。所以我正在努力解决这个问题。如果我做错了，请告诉我如何在 vue.js 脚本中访问这个“Id”和 css
html

<span id="cm_count" ref="cm_count">
    ({{ c_count }})
</span>

这是在 vue.js 中访问 id "cm_count" 并且还需要 vue.js 脚本中的 .css 的正确方法吗
vue.js

this.$refs.cm_count.innerText ='('+ count +')';
this.$refs.cm_count.css('color', '#DB0038');

Answer 1

在 JS 中，我们选择项目并对其进行操作。在 Vue 中，我们说项目应该如何应对一些变化并让一切运行。在极少数情况下，可能需要选择一个对象并更改其状态，但在您的情况下，您应该使用计算属性：

<span id="cm_count" ref="cm_count" :syle="spanStyles">
    ({{ c_count }})
</span>


computed: {
  spanStyles() {
    return `color:${this.c_count > 5 ? 'red' : 'black'}`;
  }
}

评论后更新

按钮没有 href 属性。这就是为什么我假设你有一个链接。

<a href="linkTo" @click="doSomething">...</a>


data() {
  return {
    isButtonClicked: false
  }
},
methods: {
  doSomething() {
    // you don't need to set a timeout here,
    // but if it goes to the wrong link,
    // you can use it to delay the changing of the link.
    setTimeout(() => this.isButtonClicked = !this.isButtonClicked, 10
  }
},
computed: {
  linkTo() {
    return this.isButtonClicked ? 'link1.com' : link2.com;
  }
}