vue2.0 组件渲染列表。请问我这样写为什么不可以？正确的写法是？

Question

html：

        <div id="app">
            <branch-list :datas="gridData"></branch-list>
        </div>
        <template id="branchList">
            <ul>
                <li class="branch" v-for="grid in datas" style="background:#f3f4f9;margin-bottom:0px;">
                    <!-- <div v-for="col in columns"> -->
                        <a href="javascript:void(0)"><img src="{{grid.Thumbnail}}" height="75" width="80" style="margin-right:5px"></a>    
                </li>
            </ul>
        </template>

js:

"use strict";    
    Vue.component('branch-list', {
        template: '#branchList',
        props: ['datas'],    
    })
    new Vue({
        el:"#app",        
        data:{
            gridColumns: ['Thumbnail'],            
            gridData: [{"Thumbnail":"images/1.png"}],            
        },                            
    })

结果是：

vue.js初学者，望大神指教。

Answer 1

v-bind:src="grid.Thumbnail" 代替 src="{{grid.Thumbnail}}"

根据官方教程：

Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：

参考：https://cn.vuejs.org/v2/guide...属性

附修改后代码：https://jsfiddle.net/1ct0yext/