vue 动态改变样式，通过input双向数据绑定用户主动改界面样式

最新推荐文章于 2023-04-20 11:32:22 发布

soso杰

最新推荐文章于 2023-04-20 11:32:22 发布

阅读量459

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_34312604/article/details/117999127

版权

vue.js 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

这个功能是在用于用户想界面主题颜色，用户可以手动改

<template>
  <div class="hello">
    
    <div class="myDiv" :class="myColor">
      div3
      <input type="text" v-model="myColor">
    </div>
    <button @click="addClass">改变样式</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      myColor: 'he300'
    }
  },
  computed:{
   
  },
  watch:{
    
  },
  methods:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myDiv{
  width: 200px;
  height: 200px;
  background: #42b983;
  margin-top: 20px;
}
.he300{
  height: 300px;
}
.red{
  color: red;
}
.green{
  color: green;
}
</style>