Vue Learning 8: Template Syntax

1. The way of interpolating expressions

2、v-text

3 、 v-html

See code below;

<div id="app">
        <div>{{message}}</div>
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '<h1>Hello</h1>'
            }
        })
    </script>

The page output is as follows:

In addition, simple calculations can be performed inside these template syntaxes, such as:

<div id="app">
        <div>{{message + ' Dell'}}</div>
        <div v-text="message  + ' Dell' "></div>
        <div v-html="message  + ' Dell' "></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            }
        })
    </script>

The page is as follows: