vueTest

C&R https://cr-vue.mio3io.com/guide/

by gajyuma

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<div id="app">






<button v-on:click="co['css-active']=!co['css-active']">css-activeをT⇔F切替</button>

<!--
<button v-on:click="onActive=!onActive">isActiveを切り替える</button>
<p v-bind:class="{ 'cssBdr': co.onBdr, 'css-active': co.onActive }" class="item">
  動的なクラス
</p>
-->

<p v-bind:class="co" class="item">
  動的なクラス
</p>


<p v-bind:style="{ color: textColor, backgroundColor: bgColor }" class="item">
  動的なスタイル
</p>





</div>

CSS

.item {
  padding: 4px 8px;
  transition: background-color 0.4s;
}

.css-Bdr{
  border:1px solid #ff0000;
}
.css-active {
  background: #ffeaea;
}

JavaScript

new Vue({
  el: '#app',
  data: {
  
    co: {
      'css-Bdr': true,
      'css-active': false,
    },
    
    /*
    onBdr: true,
    onActive: false,
    */
    
    textColor: 'red',
    bgColor: 'lightgray'
  }
})