css - 如何在 vue.js 中动态应用 CSS？

Question

这是我的情况:

我有一个允许用户更改 UI 大小的网络应用程序。 (即小、中或大按钮)

用户可以在运行时动态更改它的外观。所有文本和表单输入框都将调整大小。

我的元素在 Vue.js 中。

解决这个问题的最佳方法是什么？用户单击时加载不同的 css？

Answer 1

当用户单击类似于此的按钮时加载不同的 CSS。代码笔:https://codepen.io/anon/pen/NJEoVM

HTML

    <div id="app" :class="size">
  <div class="text">Text</div>
  <input class="ipt"/><br/><br/> 
  <button class="btn" @click="change('small')">Small</button>
  <button class="btn"  @click="change('medium')">Medium</button>
  <button class="btn"  @click="change('large')">Large</button>
</div>

CSS

    .small .ipt{
  width: 100px;
  height:30px;
}
.small .text{
  font-size: 18px;
}

.medium .ipt{
  width: 300px;
  height:50px;
}
.medium .text{
  font-size: 32px;
}

.large .ipt{
  width: 600px;
  height:100px;
}
.large .text{
  font-size: 64px;
}

Javascript

    new Vue({
  el: '#app',
  data:()=>({
  size:'small'
}),
methods:{
  change(val){
    this.size = val
  }
}
});