Question

我正在学习此vue.js课程，作者明确表示通过$ refs更改元素的DOM不会影响插值，事实上，直接对DOM所做的任何更改都会被插值覆盖（如果存在）。那没有发生。

尝试通过查询选择器（而不是$ refs）执行相同的结果。

    <div id="app11">
        <h1 ref="myHeading">{{ val }}</h1>
        <button @click="viaRefs">Change value via $refs to 5</button>
    </div>


const vm11 = new Vue({
    el: "#app11",
    data: {
        val: 0
    },
    methods: {
        viaRefs: function() {

            this.$refs.myHeading.innerText = 5;
        }
    }
});

setInterval(() => {
    vm11.val++;
}, 1000);

我希望在按下按钮后此标题中的文本显示一会儿5，然后此setInterval再次更改val，Vue.js通过将标题的内部HTML更新为val当前值来做出反应，直到那时。但是，它卡住了我直接给它的价值。我想念什么？

Answer 1

这里的问题是，当您设置innerText时，您用新的替换了Vue知道的TextNode。您实际上已经失去了束缚。

就您而言，您可以通过将任务分配为以下方式来解决此问题：

this.$refs.myHeading.childNodes[0].data = 5;

进行此更改后，单击该按钮将使您的<h1>暂时显示5，然后从上次停止处取回。

如果您打算将显示值“重置”为5并从那里开始计数，那么您的分配应直接处理data属性，而不是通过{{1}处理innerHtml }：

refs

$ ref会搞乱插值吗？

1 个答案: