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">