Chapter 2 template syntax - Interpolation
We, used in the previous code {{}}in the form of the object instance attribute value acquired object data in the html;
This use {{}}to obtain worthy way, is called interpolation or interpolation expression ;
2.1 Text
Data Binding The most common form is the use of "Mustache" syntax (curly brackets) Text Interpolation:
<span>Message: {{ msg }}</span>
Mustache tag will be replaced on the corresponding data object msgattribute. Whenever the data objects bound msgproperty is changed, the content will be updated at the interpolation. Even data content section of html code, text content is still to show
<body>
<div id="div">
文本插值 {{html_str}}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
html_str:'<h2>Vue<h2>'
}
})
</script>
Browser rendering results:<div id="div">文本插值 <h2>Vue<h2></div>
Open the browser input REPL environment app.html_str = '<s>vue</s>'
Browser rendering the results will change immediately: <div id="div">文本插值 <s>vue</s></div>
2.2 Use JavaScript Expressions
So far, in our template, we have only bind simple property keys. But in fact, for all data binding, Vue.js provides full support JavaScript expression, but you can not use JS statement;
(Expression is a calculation, the outcome; statement is the code, you can no results)
<body>
<div id="div" >
{{ un > 3 ? '大' : '小'}}
{{ fun() }}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
un:2,
fun:()=> {return 1+2}
}
})
</script>
