Section 5 template syntax - Interpolation

1. v-once instruction renderings: v-command Once prevent the display of the new variable value is the price of a cell phone has changed, but the official website of the sales price or display the old price, the new price does not show it.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    < Script the src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ Script > 
</ head > 
< body > 
<-! V-Once command: When this data is re when data becomes defined, but does not update the elements in the new value   -> 
< div ID = "App" V-Once > 
    {{MSG}} 
</ div > 
< Script type = "text / JavaScript" > 
    window. the onload =  function () {
         var VM =  new new Vue ({ 
            EL: '#app',
            data: {
                msg: 'hello vue'
            }
        });
        console.log(vm);
        vm.$data.msg = 'hahahahha';
        console.log(vm);
    }
</script>
</body>
</html>

Extended - execution framework code sequence renderings: priority on execution code example vue

2. v-html rendering instructions:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    < Script the src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ Script > 
</ head > 
< body > 
<-! V-HTML instructions: the original HTML code output is not a plain text, HTML think () method of jq -> 
< div ID = "One" > 
    < P > Hello, I have little cat: rawHtml {{}} </ P > 
    < P > Hello my little cat: < span v-HTML = "rawHtml" > </ span > </ the p- > 
</ div >
<script type="text/javascript">
    var rh = new Vue({
        el: '#one',
        data: {
            rawHtml: '<span style="color:red">hsq</span>'
        }
    })
</script>
</body>
</html>

3. v-bind instructions:

Code:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #id_red{
            color: red;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="two">
    <p v-bind:id="attribute_name">猜猜我是谁</p>
</div>
<script type="text/javascript">
    el_vbindwas= new Vue({
        el: '#two',
        data:{
            attribute_name: 'id_red'
        }
    })
</script>
</body>
</html>

4. FIG JavaScript expression results:

Code:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        } 
    </ Style > 
    < Script the src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ Script > 
</ head > 
< body > 
< div ID = "JS" > 
    {{number + 1 + 'numeric string'}} < br /> 
    {{yesorno 'YES': 'NO'}?} < br /> 
    <-! empty the contents split into an array, the array inverted , empty the contents of the array element into a string -> 
    { '.. Reverse () {message.split the Join (') ( '')}} 
</ div > 
<script type="text/javascript">
    var js=new Vue({
        el: '#js',
        data: {
            number: 10,
            yesOrNo: false,
            message: 'vue'
        }
    })
</script>

</body>
</html>

Section 5 template syntax - Interpolation

Guess you like