如何用HTML语言图像插值,指令1——（插值表达式/v-cloak/v-text/v-html）

一、mustache插值表达式

即两个大括号({{}})，在标签元素内容中使用，传入变量，显示Vue对象data中的值。

{{ msg }}

var vm = new Vue({

el:'#app',

data:{

msg:'123'

}

})

浏览器显示

二、v-cloak

网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标签会自动消失变回显示。

[v-cloak]{

display: none;

}

{{ msg }}

var vm = new Vue({

el:'#app',

data:{

msg:'123'

}

})

三、v-text

和插值表达式相似，渲染标签内容。

初始标签内没内容，不会出现插值表达式的闪烁问题。

v-test对应的数据会完全覆盖标签中的内容；插值表达式只会替换自己的占位符，其他内容不变。

++++{{ msg }}----

++++----

var vm = new Vue({

el:'#app',

data:{

msg:'123'

}

})

四、v-html

v-html对应的数据会完全覆盖标签中的内容，但会把对饮数据当作html解析到页面上，而插值表达式和v-text只会把数据当作普通文本加载到页面上。

{{ msg }}

var vm = new Vue({

el:'#app',

data:{

msg:'

我是一个html标签！

'

}

})