Question

我有一个页面可以让AJAX请求更新内容。我发出请求并获得JSON，看起来像这样：

{
    "item": {
        "id": "myElementToChange",
        "value": "My Content to update"
    }
}

然后我解析它并像这样更新页面：

var str = '{"item": {"id": "myElementToChange","value": "<h1>My Content to update</h1>"}}';
var json = JSON.parse(str);
var $element = $("#"+json.item.id );
$element.html(json.item.value);

我可以在Vuejs做类似的事吗？或者我是否必须预定义模板以适应我想要更新的每种类型的ID？

http://jsfiddle.net/ogewwqzt/

Answer 1

我首先要说的是，即使你使用Vuejs而不是jQuery，你仍然可以在你的vuejs代码中使用普通的js函数，例如：

document.getElementById(json.item.id).innerHTML = json.item.value;

当然它没有利用Vuejs的功能。

vue方式是使用声明式渲染：

<div id="app">
  {{ message1 }}
  {{ message2 }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message1: 'yo',
    message2: 'yo2'
  }
})

然后在方法中执行ajax调用，使用调用结果更新数据（message1和message2），让vuejs反应性功能更新DOM。

此外，让服务器直接发送HTML ID似乎是一个非常奇怪的选择。为什么后端需要知道你的html id的名字？您可能希望能够在不修改服务器代码的情况下更改html ID。

这个jQuery动态DOM操作可以用Vuejs完成吗？

1 个答案: