美文网首页
Vue基础语法-HTML模板

Vue基础语法-HTML模板

作者: 恰似一碗咸鱼粥 | 来源:发表于2018-12-16 21:40 被阅读0次

文本插入

<span id="pig">{{name}}</span>

如此插入,无论何时name的值改变,span标签中的值也会跟着改变
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

<span v-once>{{name}}</span>


new Vue({
el:"#app",
data:{name:yuan}
})


原始HTML插入

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

<p v-html="html"></p>

这个p标签里的内容会被替换为v-html指向的属性值


new Vue({
el:"#app",
data:{name:<a href="xxx"></a>}
})


HTML属性的插入

Mustache的语法不能作用在HTML特性上,所以要使用v-bind属性
如此一来,a标签的src属性就改变为了

<a id="app" v-bind:src="link"></a>


new Vue({
el:"#app",
data:{link:"idler.online"}
})

相关文章

  • vue基础语法

    vue常用基础语法: 一、模板语法 1.vue使用基于html的模板语法,智能计算出最少需呀重复渲染的组件;2.数...

  • 千锋vue基础教程2020

    一. Vue 基础 1. 模板语法 (1)插值 a.文本 {{}} b.纯HTML v-html ,防止XSS,c...

  • Vue初学-模板语法

    模板语法 Vue使用了基于HTML的模板语法,语序开发这声明式将dom绑定在底层Vue实例的数据。Vue的模板都是...

  • 模板语法

    模板语法