v-bind屬性的綁定

時間 2020-05-22

標籤 bind 屬性綁定简体版

原文原文鏈接

v-bind：屬性綁定；html

當咱們並無使用v-bind使用的時候，突破不能顯示出來，會提示錯誤，提示咱們使用v-bind；vue

當咱們使用v-bind時圖片就能夠顯示：url

v-bind的簡寫是冒號：spa

使用v-bind進行樣式的修改：3d

進行對字符串的拼接：code

以上實例總的代碼：htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
        <script src="../js/vue.js"></script>
        
        <script> window .onload= () =>{ new Vue({ el:"#one", data:{ imgurl:"https://cn.vuejs.org/images/logo.png", myWidth:"120px", myHeight:"240px", fileName:"logo.png" }, methods:{ } }); } </script>
    </head>
    <body>
        <div id="one">
        <!--    <img v-bind:src="imgurl" />-->
   <!--    <img :src="imgurl"  :width="myWidth"  :height="myHeight"/>-->
   
   <img :src="'../res/images/'+fileName"  :width="myWidth"  :height="myHeight"/>
        
            
        
            
        </div>
    </body>
</html>

相關標籤/搜索