大二寒假学习6（vue学习模板语法之使用JavaScript表达式）

前提

{{}}里面只能放 单一表达式 ，也就是一段能够被求值的JvavScript代码。判断 {{}} 里面 是否 是 单一表达式：{{}}里面的内容 是否可以合法的写在return后面

模板语法

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ hello }}</p>
  <p>{{ ok?'YES':'NO' }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
  <p>{{ message }}</p>

</template>



<script >
export default{
 data(){
   return{
     msg:"神奇的语法",
     hello:"hello world!",
     ok:true,
     message:"大家好"
   }
 }
}
</script>

 

无效示范

<p>然后是无效示范：</p>

<!-- 这是一个语句，而非表达式 -->
<p>{{var a = 1 }}</p>

<!-- 条件控制也不支持，必须要直接能有结果的-->
<p>{{ if (ok) { return message }}} </p>

<p>&nbsp;</p>
<p>里面只能放结果，所以不在其里面进行逻辑操作，旨在script里面进行</p>