Vue 插值

一、文本插值

使用双大括号标签 {{}}

<h2>{{text}}</h2>

只渲染一次数据：

<h2 v-once>{{text}}</h2>

原样输出，不进行替换 使用v-pre指令

<P v-pre>{{text}}</p>

二、插入HTML

输出真正的html内容，使用v-html指令

<!-- 输出html -->

<p v-html="message"></p>
<script>
    const vm = Vue.createApp({
        data(){
            return{
                text:'山不在高，有仙则灵',
                text:'静以修身，俭以养德',
                author:'----诸葛亮',
                message:'<h3>人生没有毕业的学校</h3>'
            }
        },methods:{
            showInfo:function(){
                return this.text + this.author
            }
        }
    }).mount('#app')
</script>

三、绑定属性

需要使用v-bind指令对属性绑定

<!-- v-bind属性绑定 -->
<span v-bind:class="value">书籍是人类进步的阶梯</span>
<script>
    const vm = Vue.createApp({
        data(){
            return{
                text:'山不在高，有仙则灵',
                text:'静以修身，俭以养德',
                author:'----诸葛亮',
                message:'<h3>人生没有毕业的学校</h3>',
                value:'title'
            }
        },methods:{
            showInfo:function(){
                return this.text + this.author
            }
        }
    }).mount('#app')
</script>

v-bind：href="url" 简写形式

:href="url"

四、使用表达式

{{ 3 + 2 }}
{{str.toUppserCase()}}