17.样式绑定之style绑定用法

最新推荐文章于 2023-05-01 11:24:11 发布

code_dream_wq

最新推荐文章于 2023-05-01 11:24:11 发布

阅读量526

点赞数 1

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110176690

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div v-bind:style='objStyles'></div>
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>
</html>

code_dream_wq

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
17.样式绑定之style绑定用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div v-bind:style='{border: borderStyle, width: widthStyle, height: .
复制链接

扫一扫