vue3.x模板语法-插值
注:实例环境 vue cli构建的项目
插值-文本
app.vue
<template>
<Example></Example>
</template>
<script>
import Example from './components/Example'
export default {
name: 'App',
components: {
Example
}
}
</script>
<style>
</style>
Example.vue
<template>
<div>
<span>Message: {{ msg }}</span>
</div>
</template>
<script>
export default {
name: "Example",
data:function () {
return {
msg:'模板语法-插值'
}
}
}
</script>
<style scoped>
</style>
浏览器看到 span的msg被替换成 data里的msg(模板语法-插值)
http://localhost:8082/
插值-原始 HTML
修改 Example.vue
<template>
<div v-html="spanHtml"></div>
</template>
<script>
export default {
name: "Example",
data:function () {
return {
spanHtml:'<span style="background-color: red">插值-html</span>'
}
}
}
</script>
<style scoped>
</style>
浏览器看看页面的变化,红色背景的插值-html被打印出来
插值-attribute
修改 Example.vue
<template>
<div>
<input type="text" v-bind:value="inputValue"/>
</div>
</template>
<script>
export default {
name: "Example",
data:function () {
return {
inputValue:'插值-attribute'
}
}
}
</script>
<style scoped>
</style>
浏览器的input是不是带有"插值-attribute"
插值理解
插值就是data方法返回的对象变量控制template模板对应文本,html,attribute变化