vue 动态样式绑定

1. 原始样式

<template>   <div id="app">     <h1>示例1 属性绑定</h1>     <div class="myStyle">测试</div>   </div> </template>  <script> export default {   name: "app", }; </script>  <style> .myStyle {   margin: 10px;   padding: 5px;   width: 200px;   height: 100px;   background: aquamarine;   border: 1 #000 solid; } </style>

2. 绑定按钮响应属性

（1）基础版

<div :class="{ myStyle: true }">测试</div>

通过改变boolean值，来动态绑定

（2）升级版

<div :class="{ myStyle: m_changeColor }">测试</div>

（3）按钮控制属性变化

<div @click="{ m_changeColor = !m_changeColor; }" :class="{ myStyle: m_changeColor }">测试 </div>

（4）完整代码

<template>   <div id="app">     <h1>示例1 属性绑定</h1>     <div @click="{ m_changeColor = !m_changeColor; }" :class="{ myStyle: m_changeColor }">测试 </div>   </div> </template>  <script> export default {   name: "app",   data() {     return {       m_changeColor: true     }   } }; </script>  <style> .myStyle {   margin: 10px;   padding: 5px;   width: 200px;   height: 100px;   background: aquamarine;   border: 1 #000 solid; } </style>

1. 计算属性

  completed: {     completeColor() {       return { myStyle: this.m_changeColor };     },   },

2. 完整代码

<template>   <div id="app">     <h1>示例1 属性绑定</h1>     <div @click=" { m_changeColor = !m_changeColor; }" :class="{ completeColor }" >测试</div>   </div> </template>  <script> export default {   name: "app",   data() {     return {       m_changeColor: true     }   },   completed: {     completeColor() {       return { myStyle: this.m_changeColor };     },   }, }; </script>  <style> .myStyle {   margin: 10px;   padding: 5px;   width: 200px;   height: 100px;   background: aquamarine;   border: 1 #000 solid; } </style>