Vue模板中执行JS逻辑且不渲染结果的实现方案

方法一：提前在计算属性中处理数据（推荐） #

模板里尽量避免直接写逻辑，建议在computed中把数据集和默认值整合好，直接渲染处理后的数据：

<template>
  <div v-for="(item, i) in processedDataset" :key="i">
    <Input 
      v-for="input in schema" 
      :key="input.name"
      :type="input.type"
      :name="input.name"
      :value="item[input.name]"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      schema: [
        { type: 'text', name:'name', value:'John' },
        { type: 'number', name:'age', value:'0' }
      ],
      dataset: [
        { name: 'Peter', age: 18 },
        { name: 'Luca' },
        { name: 'Anna', age: 25 }
      ]
    }
  },
  computed: {
    processedDataset() {
      return this.dataset.map(item => {
        const processedItem = {}
        this.schema.forEach(input => {
          // 优先用数据集里的值，没有则取schema的默认值
          processedItem[input.name] = item[input.name] ?? input.value
        })
        return processedItem
      })
    }
  }
}
</script>

方法二：在模板绑定表达式中直接计算（不修改原配置） #

如果不想提前处理数据，可以直接在Input的value绑定里计算对应值，表达式仅用于属性赋值，不会渲染到DOM：

<template>
  <div v-for="(dataItem, i) in dataset" :key="i">
    <Input 
      v-for="input in schema" 
      :key="input.name"
      :type="input.type"
      :name="input.name"
      :value="dataItem[input.name] ?? input.value"
    />
  </div>
</template>

注：??是空值合并运算符，仅当dataItem[input.name]为null或undefined时才会使用默认值；若需兼容旧环境，可替换为dataItem[input.name] !== undefined ? dataItem[input.name] : input.value。

原代码问题说明 #

你用{{}}插值表达式时，Vue会把表达式的返回值插入到DOM中。赋值表达式input.value = dataset[i][input.name]的返回值就是被赋的值，所以会被渲染出来。而v-bind绑定属性时，表达式仅用于计算属性值，不会把结果输出到页面。

另外不建议直接修改schema里的input.value——schema通常作为配置项存在，修改它可能影响其他场景的使用，还可能触发不必要的重渲染。

内容的提问来源于stack exchange，提问作者Dani Pardo