数据填充是Vue中非常常见的技能和任务。而且掌握Vue数据填充，可以提升开发效率和降低出错风险。

Vue提供了多种方式来填充数据，下面我们来看几个实例：

1. 差值表达式

   <div>
   {{ message }}
   </div>
   <script>
   export default {
   data() {
   return {
   message: 'Hello World'
   }
   }
   }
   </script>

   上述例子中，使用差值表达式将变量message的值插入到template中，达到数据填充的效果

2. v-bind指令

   <img v-bind:src="imageSrc">
   <script>
   export default {
   data() {
   return {
   imageSrc: '/assets/images/logo.png'
   }
   }
   }
   </script>

   上述例子中，使用v-bind指令动态绑定imageSrc到img的src属性上，达到数据动态填充的效果

3. v-for指令

   <ul>
   <li v-for="item in items" :key="item.id">
   {{ item.name }}
   </li>
   </ul>
   <script>
   export default {
   data() {
   return {
   items: [
   { id: 1, name: 'item 1' },
   { id: 2, name: 'item 2' },
   { id: 3, name: 'item 3' }
   ]
   }
   }
   }
   </script>

   上述例子中使用v-for指令实现循环填充，循环items数组，将name属性的值填充到template中的li标签中

除此以外，Vue还有其他数据填充方法，如计算属性computed、监视watch等，不同场景使用不同的数据填充方法可以帮助我们高效完成开发任务。