创建元素和 querySelector 在 VueJS 中不起作用答案

【问题标题】：Create elements and querySelector doesn't work in VueJS创建元素和 querySelector 在 VueJS 中不起作用
【发布时间】：2017-10-30 06:31:14
【问题描述】：

我使用 Javascript 创建了 HTML 元素。当我尝试将代码转换为 VueJS 时，页面加载时不会创建元素。

HTML

<div id="chat" class="chat-size col-centered margin-btm-50"></div>

VueJS

var chatSample = [
   {name:"Julia", message: "Hi"},
   {name:"John", message: "Hi"},
   {name:"Julia", message: "Bye"}
];

chatSample.forEach(function (obj, i) {
  var rowItem = document.createElement('div')
  var chatItem = document.createElement('div')
  var chatName = document.createElement('div')
  var msg = document.createTextNode(obj.message)
  var name = document.createTextNode(obj.name)
  rowItem.className = 'chat-row margin-chat none'
  if (i === chatSample.length - 1) {
    rowItem.id = 'last'
  }
  if (obj.name === 'Police') {
    chatItem.className = 'chat-right'
    chatName.className = 'name bold text-right padding-chat-right'
  } else {
    chatItem.className = 'chat-left'
    chatName.className = 'name text-left padding-chat-left'
  }
  chatItem.innerHTML = msg.textContent
  chatName.innerHTML = name.textContent
  var chat = document.querySelector('#chat');
  rowItem.appendChild(chatName);
  rowItem.appendChild(chatItem);
});

现场演示：http://jsfiddle.net/vjvMp/2070/

【问题讨论】：

有 1 个问题。在此：if (i === chatSample.length - 1)，chatSample 是什么？如果您指的是上面的对象，您应该将其作为参数传递并访问它。 Updated Fiddle。注意，我不是vue的人，所以只是修复了JS部分。

标签： javascript jquery html vue.js

【解决方案1】：

Vue 使用声明式渲染来显示数据。它有一个非常简单的模板系统，我建议你阅读这个 - https://vuejs.org/v2/guide/

此链接将帮助您呈现您的列表 - https://vuejs.org/v2/guide/list.html

【讨论】：

【解决方案2】：

你为什么不用 VueJS 的方式来做呢。比如

new Vue({
  el: '#demo',
  data: {
    chatSample: [{
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'Who is there?'
      },
      {
        'name': 'Police',
        'message': 'Police '
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'What do you want?'
      },
      {
        'name': 'Police',
        'message': 'We want to talk.'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'How many of you are there?'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'How many of you are there?'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'How many of you are there?'
      },
      {
        'name': 'Police',
        'message': 'Two.'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'So talk with each other'
      }
    ]
  }
})

<div id="demo">
  <div class="chat-size col-centered margin-btm-50">
    <div class="row chat-row margin-chat none" v-for="(chat, idx) in chatSample" :key="idx">
      <div class="name text-left padding-chat-left" v-html="chat.name"></div>
      <div class="chat-left" v-html="chat.message"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

您可以使用 Vue 中的 :class 属性添加条件类。

【讨论】：