Vue 插值表达式

最新推荐文章于 2024-05-08 23:35:06 发布

一条代码虫

最新推荐文章于 2024-05-08 23:35:06 发布

阅读量674

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Alittle_lazy/article/details/125192310

版权

新的技术会包含一些新的编码规范，Vue框架尽管使用的基础技术都是html/css/js，合理的编码规范对于项目开发效率的提升非常明显

（1）插值表达式

插值表达式，专业术语称为mastach语法，就是通过两对花括号包含的一个表达式，可以直接执行js表达式语句，很方便的完成数据和页面的连接

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <p>
      直接输出变量内容：{{ name }}
    </p>
    <p>
      字符串拼接：{{ '姓名:' + name }}
    </p>
    <p>
      js内建函数：{{ version.toUpperCase() }} {{ version.toLowerCase() }}
    </p>
    <p>
      js三元表达式：{{ age > 18 ? '成年': '未成年' }}
    </p>
    <p>
      自定义函数的调用：{{ reverse(version) }}
    </p>
    <!-- <p>
      if-else判断（语法结构，不能使用）：{{ if(age > 18) '成年' else  '未成年' }}
    </p> -->
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        name: "大牧",
        version: 'Version1.0',
        age: 20
      },
      methods: {
        // 自定义函数，必须写在vue实例选项的methods选项中
        reverse(str) {
          return str.split('').reverse().join('')
        }
      }
    })
  </script>

</body>
</html>

小任务：练习完成后，通读官方文档【声明式渲染 https://cn.vuejs.org/v2/guide/#声明式渲染】