动态绑定style

万事胜意sy

于 2020-12-20 22:15:03 发布

阅读量463

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_50736511/article/details/111463884

笔记专栏收录该内容

469 篇文章

订阅专栏

博客围绕动态绑定style展开，但具体内容缺失。动态绑定style在前端开发中可实现元素样式的灵活变化，提升页面交互性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id='div'>
        <div :style="{fontSize:ground+'px',backgroundColor:color }">
          {{one}}
        </div>
        <div :style="first()">
            {{one}}
          </div>
  

    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    const div =new Vue({
     el:'#div',
      data:{
      one:'hello,vue',
          ground:100,
          color:'pink'
     },
     methods:{
         first:function(){
             return{fontSize:this.ground+'px',backgroundColor:this.color }
         }
     }

    })
</script>