As the title suggests, this lesson focuses on style and class binding, as well as computed properties. By now you should have been introduced to all three of these methods in your homework at Vuemastery, but the concepts are challenging enough to merit reinforcement.<\/p>\n\n\n\n
const drinkdata<\/strong> = {
data() {
return {
bgColor: \"red\",
drink:
[{<\/code><\/pre>
<h2 :style<\/strong>=\"{ backgroundColor: bgColor }\">{{ eachDrink.drink_name }}<\/h2><\/code><\/pre><\/li>\n\n\n\n- Change the value of bgColor to something more subtle such as bgColor: “#d9d6d6” (a nice light gray) and move your style binding to the div tag instead. Now, each name and drink description has a gray background. <\/li>\n\n\n\n
- You could add as many css values as you like simply by separating them with commas and creating the value in your data, but that could get pretty clunky. In your data, create a new variable named myDiv and populate it with values as shown below. Then add it to your html by modifying your :style= statement.
const drinkdata = {
data() {
return {
myDiv: {
backgroundColor: \"#d9d6d6\",
width: \"400px\",
fontFamily: 'Arial',
}<\/strong>,
drink:
[{<\/code><\/pre>
<div id=\"drink\">
<div :style=\"[myDiv]\" v-for=\"eachDrink in drink\" :key=\"eachDrink.counter\">
<h2>{{ eachDrink.drink_name }}<\/h2>
<p>{{ eachDrink.fact }}<\/p>
<\/div>
<\/div><\/code><\/pre><\/li>\n\n\n\n- It is also possible to apply multiple values at once by creating and applying more than one object that contains multiple css properties. Delete myDiv from your vue and replace it with these two variables: divStructure and divText. Bind divStructure to your <div><\/div> tag and divText to your <h2><\/h2> element. <\/strong>
divStructure: {
backgroundColor: \"#f5cac3\",
width: '400px'
},
divText: {
fontFamily: 'Courier New',
fontStyle: 'bold',
color: 'black',
},
drink:
[
<\/pre><\/li>\n<\/ol>\n\n\n\nLet’s compute something<\/h3>\n\n\n\n
This compute lesson will be brief but we may revisit compute later on. For now, we are going to use compute to cause one of the drinks to randomly appear in a header at the top of our document.<\/p>\n\n\n\n
\n- Add a computed section below data as shown below, with a value of title.
\/\/drinks
},
\/\/NEW SECTION
computed: {
title() {
}
}
};<\/code><\/pre><\/li>\n\n\n\n- Within the brackets { } add return this.drink[0].drink_name. <\/strong>Now add <h1> tags to the top of your document underneath <div id=”drink” >, and add {{title} between the h1 tags. Save everything and test. You should see the first drink in the list (Iced Matcha Latte).
computed: {
title() {
return this.drink[0].drink_name;
}
}<\/code><\/pre><\/li>\n\n\n\n- That was nice but we are equal opportunity around here so modify title to match the statement below to randomly select a drink name.
computed: {\n title() {\n let whichDrink = Math.floor(Math.random() * this.drink.length);\n return this.drink[whichDrink].drink_name;\n }\n}<\/code><\/pre><\/li>\n\n\n\n- Now a random drink will appear every time you refresh the page. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
Vue 3: A look at class and style binding, and computed properties As the title suggests, this lesson focuses on style and class binding, as well as computed properties. By now you should have been introduced to all three of these methods in your homework at Vuemastery, but the concepts are challenging enough to merit … Continue reading Exercise: Vue Part III<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3698,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3802","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3802"}],"version-history":[{"count":27,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3802\/revisions"}],"predecessor-version":[{"id":4714,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3802\/revisions\/4714"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3698"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}