VUE中v-bind动态绑定style

2021-08-03 17:01:20 阅读：102 来源： 互联网

标签：el style VUE -- bind app message finalSize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  <h2 v-bind:style="{key（CSS属性名）:value（属性值）}">{{message}}</h2>-->
<!--  动态绑定style时，属性值要用‘’括起来,不然会当成变量去解析-->
<!--<h2 :style="{fontSize: '50px',color:'red'}">{{message}}</h2>-->
  <h2 :style="{fontSize:finalSize,color:'red'}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
  <!--  如果finalSize只定义了数字没有定义培训可以在 finalSize后加+‘px’-->

  
  <h2 :style="[]">{{message}}</h2>
  
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      finalSize:'50px',
      
    },
    methods:{
      getStyles: function (){
        return {fontSize:this.finalSize,color:'red'}
      }
    }
  })
</script>

</body>
</html>

标签：el,style,VUE,--,bind,app,message,finalSize
来源： https://blog.csdn.net/Paranoid_truggle/article/details/119354107

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE中v-bind动态绑定style