Again, I made up my own A/C a bit. The example called for separating the quote from the attribution, and I see how to do that, but I'm not going to. I had more fun inserting a randomizer for Princess Bride quotes. The top quote is random, but the bottom unordered list shows all the quotes in the Vue list so I could try a control loop.
[Image]
HTML:
{{selectedItem}}
{{ item.message }}
Javascript + Vue 2.2.1
var app = new Vue({
el: '#app',
components: {
},
data: {
items: [
{ message: "\"Anybody want a peanut?\" - Fezzik"},
{ message: "\"If there are, we all be dead.\" - Fezzik"},
{ message: "\"He's really very short on charm.\" - Fezzik" },
{ message: "\"Fuss, fuss… I think he like to scream at us.\" - Fezzik"},
{message: "\"Probably he means no harm.\" - Montoya"},
{message: "\"You have a great gift for rhyme.\" - Montoya "}
],
selectedItem: '',
},
created () {
const idx = Math.floor(Math.random() * this.items.length);
this.selectedItem = this.items[idx].message
}
})
"Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Quotes"
No comments yet. -