v-bind:属性绑定;

 

当我们并没有使用v-bind使用的时候,突破不能显示出来,会提示错误,提示我们使用v-bind;

v-bind属性的绑定

 

 v-bind属性的绑定

 

当我们使用v-bind时图片就可以显示:

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 >
        <!--    <img v-bind:src="imgurl" />-->
   <!--    <img :src="imgurl"  :width="myWidth"  :height="myHeight"/>-->
   
   <img :src="'../res/images/'+fileName"  :width="myWidth"  :height="myHeight"/>
        
            
        
            
        </div>
    </body>
</html>

 

相关文章:

  • 2022-12-23
  • 2021-06-16
  • 2022-12-23
  • 2022-01-13
  • 2021-08-12
  • 2022-12-23
  • 2020-10-24
  • 2022-01-02
猜你喜欢
  • 2022-12-23
  • 2021-04-08
  • 2021-12-06
  • 2021-08-17
  • 2021-06-22
  • 2022-12-23
相关资源
相似解决方案