vue模板语法之插值语法{{}}的运用

1.关于插值语法

Vue.js 的插值语法是其模板语法的一部分，允许动态地插入数据到模板中。这是通过使用双花括号 {{ }} 语法实现的。因为双花括号外形酷似胡子，所以也被称之为“胡子语法”

插值语法允许在模板中插入变量的值。当 Vue 实例化时，它会解析模板，并将双花括号中的内容替换为其对应的变量的值。

2.插值语法可以插入哪些数据

1.在data中声明的变量、方法，methods中的方法等都可以。

具体效果如下图：

2.常量都可以。

无论是整数，小数，还是字符串的常量，只要写在双花括号内都能渲染出来，具体如下图：

3.只要是合法的javascript表达式，都可以。

例如数字型的计算、字符型的拼接、三目运算符等，具体如下图：

4.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。

    'Infinity,undefined,NaN,isFinite,isNaN,' 
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' 
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' 
    'require'以上这些都能使用，举例：