Vue-補間

Vueインスタンスdataの値は、DOMで直接使用するのに便利です.具体的には、次の例を参照してください.

<script>
new Vue({
  el: '#app',
  data: {
    text: '      ',
    html: '    ',
    imtes: [
    	{name: sp1, value: 1},
    	{name: sp2, value: 2},
    	{name: sp3, value: 3},
    ],
    id: 1,
    linkText: '       ,
    attributeName: href,
    url: 'http://www.baidu.com',
    key: '',
  }
})
</script>

テキスト
を使用してテキスト補間を行います.

<p>{{text}}p>
//     ：<p>      p>

Html
v-html命令を使用してhtmlコードを出力する

<div v-html="html">div>
//      ：<div><span>    span>div>

ツールバーの
v-bindのみで属性補間を行います.注意:属性補間には{{...}}(二重括弧)は必要ありません.

<ul>
	<li v-for="item in imtes">
		<span v-bind:class="item.name">{{item.value}}span>
	li>
ul>
//     ：
<ul>
	<li v-for="item in imtes">
		<span class="sp1">1span>
		<span class="sp2">2span>
		<span class="sp3">3span>
	li>
ul>

v-bind:class=「item.name」は、「class=「item.name」と略記することもできます.
スタイル(インラインスタイル)

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">      div>
div>

参考資料:https://cn.vuejs.org/v2/api/https://www.runoob.com/vue2/vue-template-syntax.html