vue_样式绑定 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .activated {color: red}
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- class绑定 -->
    <!-- 对象绑定 -->
    <div @click="handleObjBind"
      :class='{activated: isActivated}'
    >
    Hello world
    </div>
    <!-- 数组绑定 activated为变量，activatedOne为常量,activatedTwo为对象 -->
    <div @click="handleArrBind"
      :class= "[activated, 'activatedOne', {'activatedTwo': false}]"
    >
    Hello world1
    </div>
    <!-- style绑定 -->
    <div @click="handleStyleBind"
      :style= "[styleObj, {fontSize: '20px'}]"
    >
    Hello world1
    </div>
  </div>
</body>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data: {
      isActivated: false,
      activated: '',
      styleObj: {
        color: 'black'
      }
    },
    methods: {
      handleObjBind () {
        this.isActivated = !this.isActivated
      },
      handleArrBind () {
        this.activated = this.activated == '' ? 'activated' : ''
      },
      handleStyleBind () {
        this.styleObj.color = this.styleObj.color == 'lightblue' ? 'black' : 'lightblue'
      }
    }
    
  })
  
</script>
</html>

 

posted @ 2020-03-05 10:37  前端之旅  阅读(166)  评论(0)    收藏  举报