Vue插值语法

以你之姓@ 2022-09-14 01:59 91阅读 0赞

> Vue的插值语法：\{ \{\}\}

chacao中需要写 js 表达式，且能够自动读取到data中定义的属性

<div id="root">
      <h1>hello,{
       {name}}</h1>
      <h1>我的年龄是,{
       {age}}</h1>
      <h1>1+1的和,{
       {1+1}}</h1>
      <h1>当前时间：{
       { new Date().getTime()}}</h1>
    </div>
    
    <script>
      Vue.config.productionTip = false
    
      new Vue({
        el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
        // el: document.getElementById('#root'), // 也可以通过document点出来
        data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
          name: 'al',
          age: '1111'
        }
      })
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16][]

可以看到，页面上展示的 姓名和年龄都是data中定义的属性，但是另外两个插值插槽中的数据都是自定义的，之所以可以这样写，是因为插值语法中，会自动处理js表达

ps：请区分js表达式和js语法

> js表达式：

js表达式：一个表达式会生成一个值，可以放在任何一个需要的地方

*   1、const x = a
 *  2、const x = a+b 运算表达式
 *  3、const x = demo(1) 函数表达式,及时返回的是undefined，那也是属于返回值
 *  4、a === b ? '1' : '0'  三元表达式

> js语句

*   if()\{\} 语句
 *  for()\{\} 语句

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ac17507dcbe54d5ea29758a363117ea7.png