v-bind动态绑定属性（一）

 

 

<div id="app">
  <h2 :style="{fontSize:50px}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        }
  })
</script>

 

报错原因： 

<h2 :style="{fontSize:50px}">{{message}}</h2>

不加引号vue会将50px当成一个变量

解决办法：

  <h2 :style="{fontSize:'50px'}">{{message}}</h2>

 

 

 不把大小写死，改为变量

<div id="app">
  <h2 :style="{fontSize:finalSize}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          finalSize:'100px'
        }
  })
</script>

 

<div id="app">
  <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          finalSize:100,
          finalColor:'red',
        }
  })
</script>

 写作finalSize:100无效果，需要单位px

如果变量写成纯数字，那可以这样手动加上px，同样会起效果

  <h2 :style="{fontSize:finalSize+'px'}">{{message}}</h2>

 如果给字体添加颜色

需要注意写作:

finalColor:'red',

<div id="app">
  <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          finalSize:100,
          finalColor:'red',
        }
  })
</script>

如果觉得颜色和字体大小写进属性太长，可以使用methods方法添加函数

<div id="app">
  <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          finalSize:100,
          finalColor:'red',
        },
        methods:{
      getStyles:function (){
        return{fontSize:this.finalSize+'px',backgroundColor:this.finalColor}
      }
        }
  })
</script>