Vue循环生成DOM，并实现双向绑定

HTML模板

<div id="vm" class="grd_portfolio_grid filterlist row">
                    <!-- <div v-for="t in todos.lawn_care"> -->
                    <div class="portfolio-item  col-sm-6 col-xs-12 col-md-3" v-for="t in All">
                        <div class="content-item">
                            <div class="entry-header">
                                <a href="#" class="entry-thumbnail"><img alt="Lessons of Resilience" v-bind:src="img/+t.thumbnail"></a>
                                <a href="#" class="entry-title">
                                    <h3 class="title">{
         
  { t.name }}</h3>
                                </a>
                            </div>
                            <div class="entry-content">
                                <div class="entry-title"><a href="#">
                                        <h3 class="title">{
         
  { t.name }}</h3>
                                    </a>
                                    <!-- <div class="entry-meta"><a class="category" href="#">{
         
  { t.thumbnail }}</a></div> -->
                                </div>
                                <div class="readmore">
                                    <a v-bind:href="t.fileName +.html" target="view_demo" class="entry-read-more">
                                        <div class="read-more"><span class="svg-icon"><i class="flaticon-right"></i></span>
                                            Read more</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- </div> -->

                  
                </div>

JS脚本

vm = new Vue({
                el: #vm,
                data: demo_config

            });
            vm._data.All = vm._data.HHEarth.content;       
            window.vm = vm;

不要忘记引用vue.js