Capítulo 2 sintaxis de la plantilla - Interpolación
Nosotros, utilizado en el código anterior {{}}en la forma del valor del atributo instancia de objeto adquirido los datos de objeto en el html;
Este uso {{}}para obtener de manera digna, se llama interpolación o la expresión de interpolación ;
2.1 Texto
Enlace de datos La forma más común es el uso de la sintaxis "bigote" (corchetes) Texto de interpolación:
<span>Message: {{ msg }}</span>
Bigote etiqueta será reemplazado en el objeto de datos correspondiente msgatributo. Siempre que los objetos de datos enlazado msgpropiedad se cambia, el contenido se actualizará en la interpolación. sección de contenido de datos, incluso de código html, el contenido del texto sigue siendo para mostrar
<body>
<div id="div">
文本插值 {{html_str}}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
html_str:'<h2>Vue<h2>'
}
})
</script>
Los resultados del navegador de renderizado:<div id="div">文本插值 <h2>Vue<h2></div>
Abrir el entorno de REPL de entrada del navegador app.html_str = '<s>vue</s>'
Navegador de la prestación de los resultados va a cambiar de inmediato: <div id="div">文本插值 <s>vue</s></div>
2.2 Uso de JavaScript Expresiones
Hasta el momento, en nuestra plantilla, tenemos las claves de propiedades simples única vinculación. Pero, de hecho, para la unión de todos los datos, Vue.js proporciona soporte completo expresión de JavaScript, pero no se puede utilizar la instrucción JS;
(La expresión es un cálculo, el resultado; declaración es el código, puede no hay resultados)
<body>
<div id="div" >
{{ un > 3 ? '大' : '小'}}
{{ fun() }}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
un:2,
fun:()=> {return 1+2}
}
})
</script>
