vue3渲染数据执行方法

Vue3渲染数据执行方法

在Vue3项目中，实现数据的渲染是一项基本而重要的任务。其解决方案主要依赖于Vue3的响应式系统和模板语法。通过将数据绑定到视图，当数据发生变化时，视图能够自动更新。

一、使用插值表达式渲染文本

这是最基础的数据渲染方式。在<script setup>中定义一个响应式数据：

vue</p>


import { ref } from 'vue'
const message = ref('Hello Vue3')


<p>
  <div>{{ message }}</div>

这里我们使用了ref函数创建了一个名为message的响应式引用对象，并且在模板中通过双大括号{{}}进行插值，这样当message的值发生变化时，页面中的文本也会随之更新。

二、渲染列表数据

当需要渲染一组列表数据时，可以采用v-for指令。例如，有一个商品列表数组：

vue</p>


import { ref } from 'vue'
const goodsList = ref([
  { id: 1, name: '苹果', price: 5 },
  { id: 2, name: '香蕉', price: 3 },
  { id: 3, name: '橙子', price: 4 }
])


<p>
  <ul>
    <li>
      商品名称：{{ item.name }} - 价格：{{ item.price }}
    </li>
  </ul>

``<code>
v-for指令根据goodsList数组生成多个元素，:key`为每个元素提供一个的标识符，确保渲染的稳定性。

三、条件渲染

有时候需要根据某些条件来决定是否渲染某个元素，这时可以使用v-if或v-show指令。

```vue


import { ref } from 'vue'
const isVisible = ref(false)



  
  
显示内容
  
  显示内容