vue.js从入门到精通之数据绑定

创建数据

var artcles = {
        artcles: [
            {
                name: '热文推荐1',
                'date': '2018-08-08 00:00:00',
                'content': 'xxxxxxxxxxxxx1',
                'href': 'xx',
                'img': 'static/index/themes/images/youtube.png'
            },
            {
                name: '热文推荐2',
                'date': '2018-08-08 00:00:00',
                'content': 'xxxxxxxxxxxxx2',
                'href': 'xx',
                'img': 'static/index/themes/images/youtube.png'
            },
            {
                name: '热文推荐3',
                'date': '2018-08-08 00:00:00',
                'content': 'xxxxxxxxxxxxx3',
                'href': 'xx',
                'img': 'static/index/themes/images/youtube.png'
            },
            {
                name: '热文推荐4',
                'date': '2018-08-08 00:00:00',
                'content': 'xxxxxxxxxxxxx3',
                'href': 'xx',
                'img': 'static/index/themes/images/youtube.png'
            }
        ]
    };

新建vue对象

var artcle = new Vue({
        el: '#artcle',
        data: artcles
    });

绑定至对应模块

 <div class="span9" id="artcle">
                <h4>实时推荐：</h4>

                <div class="row" v-for="artcle in artcles">
                    <div class="span2">
                        <img v-bind:src="artcle.img" alt="">
                    </div>
                    <div class="span7">
                        <h3> {{artcle.name}}</h3>
                        <hr class="soft">
                        <h5>{{artcle.date}} </h5>
                        <a class="btn btn-small pull-right"
                           v-bind:href="artcle.href">查看详情</a>

                        <p>{{artcle.content}} </p>
                        <br class="clr">
                    </div>
                </div>