More Related Content
More from CASAREAL, Inc. (20)
夏の終わりのVue.js -これからのJavaScriptフレームワーク大本命-
- 12. <div id="app">
<div v-if="age >= 20">
{{age}}
</div>
<div v-else-if="age >= 18">
{{age}}
</div>
<div v-else>
{{age}}
</div>
</div>
new Vue({
el: '#app',
data() {
return {
age: 19
}
}
})
- 15. <template id="template-calc">
<div>
{{num1}} + {{num2}}
</div>
</template>
<div id="app">
<calc-component/>
</div>
const CalcComponent = {
template: '#template-calc',
data() {
return {
num1: 2,
num2: 3
}
}
}
new Vue({
el: '#app',
components: {CalcComponent}
})
- 19. const store = new Vuex.Store({
state: {
deposit: 1000
},
mutations: {
['PAYMENT'](state, payload) {
state.deposit -= payload
}
}
})
{{this.$store.state.deposit}}this.$store.commit('PAYMENT',100)
- 21. const router = new VueRouter({
routes:[
{path:'/', component:IndexComponent},
{path:'/list', component:ListComponent},
]
})
<div id="app">
<div>
<router-link to="/">IndexPage </router-link>
<router-link to="/list">ListPage </router-link>
</div>
<div>
<router-view> </router-view>
</div>
</div>