vue3.x模板语法-插值

Posted 2021-06-20 天行子

 

注：实例环境 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变化