自己写的，错误多多。
<!DOCTYPE html>
<div id="messageHome">
<button @click="showMessage">posts</button>
<ul><li>{{ yourvar }}</li></ul>
<p>Click on a blog title to the left to view it.</p>
</div>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
yourvar: [
index Cat Ipsum
]
}
},
methods: {
showMessage() {
this.yourvar= "Home component"
}
}
})
app.mount('#messageHome')
</script>
这个出来了，
Cat Ipsum
Hipster Ipsum
Cupcake Ipsum
代码是
<ul id="postApp">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app=Vue.createApp({
data() {
return {
items: [ {message: 'Cat Ipsum' }, {message: 'Hipster Ipsum'}, {message: 'Cupcake Ipsum'} ]
}
}
})
app.mount('#postApp')
</script>
怎么实现点击按钮出来这个呢，怎么结合呢？
无从下手，呵呵。
随便写了一个，把点击出现一段话的代码与这个li三行的结合起来，好像不对呢
<button @click="showMessage">Posts</button>
<ul id="postApp">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app=Vue.createApp({
data() {
return {
items: ''
}
}
}),
methods: {
showMessage() {
this.items.message= [ {message: 'Cat Ipsum' }, {message: 'Hipster Ipsum'}, {message: 'Cupcake Ipsum'} ]
}
}
app.mount('#postApp')
</script>
很多错误啊。
进一步地，三个按钮又怎么并排呢？又一个列表？嵌套的列表怎么写？
不会写了，也不会想了，看一下答案吧。
也没有看书，看书时间太重复了，想吧，又想不出来。这种时刻就是学习的时候取舍困难的时候吧。
那就先写一个这个，照写一个，再看书，再写。硬想还是太难了。
