二、vue中v-bind使用

一、v-bind基本使用

一个页面中,除了标签内容需要动态绑定外,标签的属性也需要动态绑定,例如:a元素的href属性和img元素的src属性。这时就需要用到v-bind了。

<body>
    <div id="app" >
        
        <img v-bind:src="imgUrl">
         
        <a v-bind:href="aHref">百度一下a>
        
        <img :src="imgUrl">
        <a :href="aHref">百度一下a>
    div>
<script src="./js/vue.js">script>
<script>
    //vue解析时去掉v-cloak属性,标签显示
    const app = new Vue({
     
        el: "#app", //用户挂载要管理的元素 
        data:{
      //定义数据
            imgUrl: 'https://img11.360buyimg.com/mobilecms/s300x300_jfs/t1/95049/33/2570/130678/5dd2a567E8f4d6e13/1d597ef0cf85be04.jpg!q70.jpg.webp',
            aHref: 'http://www.baidu.com'
        }
        })
script>
body>

效果图:
二、vue中v-bind使用_第1张图片

二、v-bind动态绑定class属性

  • 普通语法(了解)
<head>
    <style>
        .colourStyle {
     
            color: red;
        }
    style>
head>
<body>
    <div id="app" >
        
                    

你可能感兴趣的:(vue,vue.js)