cssobj-vuejs-demo

cssobj work with vue demo

by futurist

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/cssobj.iife.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/cssobj-plugin-post-csstext.iife.js"></script>
<textarea id="result" style="width: 600px; height:60px;"></textarea>


<template id="my-template">
  <ul class="{{'nav' | mapClass}}" @click="updateCSS">
  <li class="{{'!news item active' | mapClass}}">[+ click me +] cssobj is awesome!</li>
  </ul>
</template>

<div id="app">
  <my-component></my-component>
</div>


<br><br><br><a target=_blank href="https://github.com/cssobj/cssobj"> -> Github Repo</a><br>

JavaScript

var obj = {
  '.nav': {
    '.item': {
      color: 'blue',
      '&.active': {
        color: 'red'
      }
    }
  }
}

Vue.filter('mapClass', function (value) {
  return this.result.mapClass(value)
})

Vue.component('my-component', {
  template: '#my-template',
  data: function () {
    return {
      result: cssobj(obj, {local: true, onUpdate: cssobj_plugin_post_csstext(updateResult)})
    }
  },
  methods: {
    updateCSS: function () {
      obj['.nav'].fontSize = 16 + Math.random()*20 + 'px'
      this.result.update()
    }
  }
})

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






function updateResult (css){ document.getElementById('result').value = css }