Zero1000

Score-Vue

terms:
ternary_condition:

1. インナーテキストの変更

index.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>



    

<div id="app">

     

  <div>{{ 1 ? 'AAA' : 'BBB' }}</div>

  

</div>

    

<script type="text/javascript">

   new Vue({  el: '#app'})

</script>

2. クラスの変更

index.html


    
<meta charset="utf-8">
<script src="https://unpkg.com/vue@next"></script>

<style>
.c1a{
	color: red;
}

.c2a{
	color: blue;
}
</style>	

<div id="app">
	
	<h1 v-bind:class="0 ? c1:c2 ">AAA</h1>

</div>

<script>
	
const App1={

	data(){ return{ 
		c1:'c1a',
		c2:'c2a',	
		
		} }

}

Vue.createApp(App1).mount('#app')
</script>