<div id="app">
<button @click="addItem">Add Item</button>
<button @click="removeItem">Remove Item</button>
<p>Items: {{ items }}</p>
</div>
<!-- 引入 Vue 3 CDN -->
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
<script>
const { createApp, reactive, watch } = Vue;
createApp({
setup() {
// 创建响应式数据
const items = reactive([1, 2, 3]);
// 监听数组变化
watch(items, (newItems, oldItems) => {
console.log('Items changed');
console.log('Old Items:', oldItems);
console.log('New Items:', newItems);
});
// 方法：添加一个新的 item
const addItem = () => {
items.push(items.length + 1);
};
// 方法：移除最后一个 item
const removeItem = () => {
items.pop();
};
return {
items,
addItem,
removeItem
};
}
}).mount('#app');
</script>
watch 数组
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}