Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。

数据绑定最基础的形式是文本插值,使用 {{}} 语法 双大括号

export

{{msg}}

source

<span id="app">{{msg}}</span>
var app = new Vue({
  el: '#app',
  data: {
    msg: '<i>Hello Vue!</i>'
  }
});

可以看到通过数据绑定渲染出来的值,是文本形式的,上面的 meg 我们给的是一个html格式的字符串, 显示的时候却是文本


思考如何通过数据绑定方式处理html片段

export

{{{msg}}}

现在可以看到这里显示的不是文本了,在解析的时候时以html的形式添加进去的。

source

<span id="app2">{{{msg}}}</span>
var app = new Vue({
  el: '#app2',
  data: {
    msg: '<i>Hello Vue!</i>'
  }
});

如果需要以 html 显示就以 三个 {{{ }}} 形式处理数据,以文笔显示就用 两个 {{ }}


export

{{{msg}}}

source

<span id="app3" class="{{display}}">{{{msg}}}</span>
var app = new Vue({
  el: '#app3',
  data: {
	display : "show",
	msg: '<i>Hello Vue!</i>'
  }
});

//通过修改 data data.display 的值来修改 dom 结构
$(".button").on("click",".btn",function(){
	if($(this).hasClass('btn-primary')){
		app.$data.display = "show";
	}else{
		app.$data.display = "hide";
	}
})