VUE属性绑定

张哥编程

发布于 2024-12-19 14:12:36

22500

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>VUE绑定属性</title>
    <script src="js/vue.min.js"></script>
    <style>
      .bg{
        width:400px;height: 400px;
        background: #FF0000;
      }
      .text-danger{
        border: 1px solid #00f;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="{bg:isBg,'text-danger':hasError}"></div>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          isBg:true,
          hasError:true
        }
      })
    </script>
  </body>
</html>