Я пытаюсь добавить стиль к каждому нечетному количеству строк в таблице. Но приведенный ниже пример не удался.

template: `
<div container>
  <h3>test title</h3>
  <table :style="overviewStyle">
  <div :class="emptyDiv" v-for="item in testlist">
   <tr>
      <td :style="{'tdStyle': index % 2 === 0, 'tdGray': index % 2 !== 0 }">[[ item.result ]]</td>
   </tr>
  </div>
  </table>
</div>
`,

computed: {
  tdStyle() {
    return {
        'border': '1px solid #C0C0C0',
        'padding': '8px',
    };
  },
  tdGray() {
    return {
        'background-color': gray,
    };
  },

Что мне интересно, этот пример работает с классом.

<td :class="{'tdStyle': index % 2 === 0, 'tdGray': index % 2 !== 0 }">[[ item.result ]]</td>

Так работает с: class, но не с: style.

Если нет более простого решения, могу ли я переместить эту логику в функцию, а затем вызвать функцию для окрашивания нечетных строк?

Вы можете сделать это в чистом CSS. Нет абсолютно никакой причины помещать это в условный код или JavaScript, что делает его намного сложнее поддерживать. У Vue есть способ объединить HTML-шаблоны, JSS и CSS в компоненты, но я не эксперт в этом вопросе.

.zebra tr:nth-child(even) {
  background: #eee;
}
.zebra tr:nth-child(odd) {
  background: #ccc;
}
<table class="zebra">
  <tr><td>foo
  <tr><td>bar
  <tr><td>baz
  <tr><td>fizz
  <tr><td>buzz
</table>

Что касается того, почему ваш код не работает, vue использует :class для условного добавления классов. При передаче объекта JavaScript в :class каждый ключ понимается как имя класса, которое присутствует, если его значение равно true.

Атрибут :style имеет другое специальное поведение, где каждый ключ передаваемого объекта является атрибутом CSS. Это полезно, если, например, вы хотите всегда устанавливать атрибут для элемента, но его значение является условным.

Ваш код использует :style с вещами, которые не являются атрибутами CSS.

<td :style="{'tdStyle': index % 2 === 0, 'tdGray': index % 2 !== 0 }">

Если вы хотите использовать его без настройки класса CSS, вам нужно сделать что-то вроде этого. Прошло уже много времени с тех пор, как я не использовал vue, и я настоятельно рекомендовал бы не использовать такую ​​логику в атрибутах HTML.

<td :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">

Наконец, ваш код даже не является допустимым HTML с div внутри таблицы, что наверняка вызовет проблемы, так как браузер не знает, куда поместить div и куда поместить tbody.