vue——5-v-bind及其实例

<div id="enjoy">
    <!--语法结构：v-bind:argument='expression'  缩写形式：:argument='expression'-->
    <!--v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V ，无法实现数据的双向绑定-->
    <img v-bind:src="imgSrc1" :title="title1"  width="400">
    <img :src="imgSrc2" :title="title2"  width="400">
    <p :style="{color:fontColor}">{{msg}}</p>
    <p :style="changeStyle">hello world!</p>
</div>

        {
            new Vue({
                el: '#enjoy',
                data: {
                    imgSrc1: "../images/fashion-001.jpg",
                    imgSrc2: "../images/fashion-001.jpg",
                    title1: 'lucy',
                    title2: 'bob',
                    msg: 'hello boy!',
                    fontColor: 'red',
                    changeStyle: {
                        color: 'blue',
                        fontSize: '40px',
                        backgroundColor: 'grey',
                    }
                }
            })
        }

###实例

<div id="enjoy">
    <p v-for="(college,index) in colleges" :class="index === activeIndex ? 'current' : ''">{{college}}</p>
</div>

        {
            new Vue({
                el: '#enjoy',
                data: {
                    colleges: [
                        'html1学院',
                        'html2学院',
                        'html3学院',
                        'html4学院',
                        'html5学院'
                    ],
                    activeIndex:3
                }
            })
        }