vue基础之v-bind属性、class和style用法分析

2019-11-19 12:00:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue基础之v-bind属性、class和style用法。分享给大家供大家参考，具体如下：

一、属性

属性:

v-bind:src=""
width/height/title....

简写:

:src="" 推荐

<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求

window.onload=function(){      new Vue({        el:'#box',        data:{          url:'https://www.baidu.com/img/bd_logo1.png',          w:'200px',          t:'这是一张美丽的图片'        },        methods:{        }      });    };

<div id="box">    <!--<img src="{{url}}" alt="">-->    <img :src="url" alt="" :width="w" :title="t">  </div>

二、class和style

:class=""     v-bind:class=""
:style=""     v-bind:style=""
:class="[red]"     red是数据
:class="[red,b,c,d]"

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style>    .red{      color: red;    }    .blue{      background: blue;    }  </style>  <script src="vue.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{          claOne:'red',//这里的red是样式class类名          claTwo:'blue'        },        methods:{        }      });    };  </script></head><body>  <div id="box">    <!--这里的calOne,calTwo指data里的数据-->    <strong :class="[claOne,claTwo]">文字...</strong>  </div></body></html>

:class="{red:true, blue:false}"//这里是{ json}

<style>    .red{      color: red;    }    .blue{      background: blue;    }  </style>  <script src="vue.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{        },        methods:{        }      });    };  </script><div id="box">    <strong :class="{red:true,blue:true}">文字...</strong>  </div>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style>    .red{      color: red;    }    .blue{      background: blue;    }  </style>  <script src="vue.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{          a:true,          b:false        },        methods:{        }      });    };  </script></head><body>  <div id="box">    <strong :class="{red:a,blue:b}">文字...</strong>  </div></body></html>

data:{json:{red:a, blue:false}}

:class="json"

官方推荐用法

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style>    .red{      color: red;    }    .blue{      background: blue;    }  </style>  <script src="vue.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{          json:{            red:true,            blue:true          }        },        methods:{        }      });    };  </script></head><body>  <div id="box">    <strong :class="json">文字...</strong>  </div></body></html>

style:
:style="[c]"

.red{      color: red;    }<div id="box">    <strong :style="{color:'red'}">文字...</strong>  </div>

:style="[c,d]"

注意: 复合样式，采用驼峰命名法

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style></style>  <script src="vue.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{          c:{color:'red'},//这里的red是 class .red          b:{backgroundColor:'blue'}//注意: 复合样式，采用驼峰命名法        },        methods:{        }      });    };  </script></head><body>  <div id="box">    <strong :style="[c,b]">文字...</strong>  </div></body></html>

:style="json"

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style></style>  <script src="vue.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{          a:{            color:'red',            backgroundColor:'gray'          }        },        methods:{        }      });    };  </script></head><body>  <div id="box">    <strong :style="a">文字...</strong>  </div></body></html>

希望本文所述对大家vue.js程序设计有所帮助。

上一篇：使用Jenkins部署React项目的方法步骤

下一篇：配置eslint规范项目代码风格