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”’

style(内联样式)

<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