vue组件 | JShare

Vue.component('pic-list', {
    props: ['items','message'],
    template: ' <span> {{ message }} {{ items }}</span> <!-- 这里必须有<span>要不不显示 vue2 -->  \
<div id="pullrefresh" class="mui-content own-content-padding"> \
<ul id="productsList" class="mui-table-view" style="margin-top: 0px;"> \
<li v-for="item in items" class="mui-table-view-cell mui-media mui-col-xs-12"> \
<a href="#"> \
<img class="mui-media-object mui-pull-left" src="../img/bg.jpeg" /> \
<div class="mui-media-body"> \
<p class="mui-ellipsis-2"> {{ item.name }}</p> \
<p class="price-one">¥ {{ item.price1 }}</p> \
<p class="price-two">¥ {{ item.price2 }}</p> \
</div> \
</a> \
</li> \
</ul> \
</div>'
});
var vm = new Vue({
    el: '.test',
    data: {
        items: [{
            herf: '#',
            name: 'name1',
            price1: '99.0',
            price2: '188.0'
        }, {
            herf: '#',
            name: 'name2',
            price1: '99.0',
            price2: '188.0'
        }, {
            herf: '#',
            name: 'name3',
            price1: '99.0',
            price2: '188.0'
        }, {
            herf: '#',
            name: 'name4',
            price1: '99.0',
            price2: '188.0'
        },
               ]
    },
    methods:{
        add: function(){
            this.items.push(
                {herf:'#',name:'new',price1: '99.0',price2: '99.0',}
            );
        }
    }
});

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="test">
            <!-- 这里必须用双引号,而且是其他类型的必须绑定才可以,要不传递的还是字符串 -->
            <pic-list message="hello" :items="items"></pic-list>
        </div>
    </body>
</html>

{"doctype":0,"resouces":"http://cdn.bootcss.com/vue/2.1.6/vue.js","options":null,"meta":null}

vue组件 | JShare

模板（查看所有模板）