掌握vue之绑定样式

最新推荐文章于 2024-05-21 11:36:23 发布

猿音

最新推荐文章于 2024-05-21 11:36:23 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43348064/article/details/106233343

笔记同时被 2 个专栏收录

24 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

绑定内联样式(style属性):

做法: 将整个style属性，看作一个对象来绑定:

	1). HTML中: <元素 :style="变量">
                          "css属性:值; css属性:值;..."
	2).在 new Vue({
			data:{
				变量:{
					Css属性:值, 
					Css属性:值,
						... : ...
				}
			}
		})

优点: 非常便于只修改其中某一个css属性！
示例: 绑定style控制模拟飞机飞行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app > div {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: fixed;
        left: 50%;
        bottom: 0;
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div :style="style">
        <p>模拟飞机</p>
      </div>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          // 不好: style:"margin-left:-100px;bottom:0"
          //                   ↑
          style: {
            //可自动翻译为 |
            marginLeft: "-100px", //必须带单位！
            bottom: 0, //只有0特殊，可以不加单位
          },
        },
      });
      //当在窗口中按下键盘时
      window.onkeydown = function (e) {
        //如果按的是上键,则bottom+10
        if (e.keyCode == 38) {
          //vm.style //{ marginLeft:"-100px", bottom:0 }
          //只取出vm对象中style属性中bottom的值，转为整数
          var bottom = parseInt(vm.style.bottom);
          //将bottom+10，再保存回vm.style.bottom中，记得加单位
          vm.style.bottom = bottom + 10 + "px";
        } else if (e.keyCode == 40) {
          //否则如果按的是下键,则bottom-10
          //只取出vm对象中style属性中bottom值，转为整数
          var bottom = parseInt(vm.style.bottom);
          //将bottom-10，再保存回vm.style.bottom中，记得加单位
          vm.style.bottom = bottom - 10 + "px";
        } else if (e.keyCode == 37) {
          //否则如果按的是左键,则marginLeft-10
          //只取出vm对象中style属性中marginLeft值，转为整数
          var marginLeft = parseInt(vm.style.marginLeft);
          //将marginLeft-10，再保存回vm.style.marginLeft中，记得加单位
          vm.style.marginLeft = marginLeft - 10 + "px";
        } else if (e.keyCode == 39) {
          //否则如果按的是右键,则marginLeft+10
          //只取出vm对象中style属性中marginLeft值，转为整数
          var marginLeft = parseInt(vm.style.marginLeft);
          //将marginLeft+10，再保存回vm.style.marginLeft中，记得加单位
          vm.style.marginLeft = marginLeft + 10 + "px";
        }
      };
    </script>
  </body>
</html>

东哥笔记