在 Vue.js 中追三种方式·name·点击按钮来改变变量的值
在 Vue.js 中追加内容的三种方式
在 Vue.js 中追加内容有几种不同的方法，下面我会用更简单的方式来解释它们。 ---一、用 v-for 追加列表内容
使用 v-for 指令，你可以遍历一个数组，然后给每个元素渲染出列表项。- 在 Vue 实例的 data 中定义一个数组。
- 在模板中使用 v-for 来遍历这个数组。
- 点击按钮，通过方法向数组添加新元素。
{{ item.name }}
``` 解释： 上面的代码会渲染出一个列表，点击按钮后，会通过 `addItem` 方法向数组中添加新的元素，列表会自动更新。 --- 二、用 v-if/v-else 追加条件内容
v-if 和 v-else 用于根据条件来显示或隐藏内容。- 定义一个变量来控制显示与否。
- 使用 v-if 或 v-else 来根据这个变量的值决定是否渲染内容。
- 点击按钮来改变变量的值。
内容会显示
``` 解释： 点击按钮时，`isVisible` 的值会改变，从而控制内容的显示和隐藏。 --- 三、通过方法追加内容
你可以定义方法来手动追加内容，这在处理复杂的 DOM 操作时很有用。- 引用需要操作的 DOM 元素。
- 在方法中创建新的 DOM 元素，并添加到父元素中。