vue如何将数据解析到h5的data-*属性中去？

Question

<tr v-for="y in info.data">

    <td>{{ y.name }} </td>

    <td>{{ y.total }}</td>

    <td>{{ y.valid }}</td>

    <td>{{ y.price }}</td>

    <td>{{ y.single_percent }}</td>

    <td>{{ y.give_money }}</td>

    <td>

        <div class="progress">

            <div class="progress-bar progress-bar-success" data-single_percent="{{ y.single_percent}}" role="progressbar" aria-valuenow="{{ y.single_percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{ y.single_percent}}%;color: #333;text-indent: 40px;">

                {{ y.single_percent}}%  <!--除了这里，这个div里面其他的{{y.single_percent}}都不能解析-->

            </div>

        </div>

    </td>

</tr>

==========================================================================

请问如何使用vue 让H5标签  data-single_percent="{{ y.single_percent}}" 以及bootstrap的进度条组件中的 aria-valuenow="{{ y.single_percent}}" ，style="width: {{ y.single_percent}}%;color: #333;text-indent: 40px;" 解析出来呢？我在chrome中审查元素发现没有解析出来   ，实在是各种搜索引擎搜了半天没有解决，求助谢谢！

Answer 1

在标签里写v-bind假定你的数据在demo下的data里<div v-bind:data-demo="demo.data">