v-bind屬性的綁定


v-bind:屬性綁定;

 

當我們並沒有使用v-bind使用的時候,突破不能顯示出來,會提示錯誤,提示我們使用v-bind;

 

 

 

當我們使用v-bind時圖片就可以顯示:

 

 

 

v-bind的簡寫是冒號:

使用v-bind進行樣式的修改:

 

 

進行對字符串的拼接:

 

 

以上實例總的代碼:

<!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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM