Vue模板语法和计算属性

最新推荐文章于 2024-10-25 09:38:23 发布

Zdmzb

最新推荐文章于 2024-10-25 09:38:23 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/Zdmzb/article/details/105181462

版权

v-once：一次性插入，不在修改，当数据改变时，插值处的内容不会更新；
v-html：插入html内容；
v-bind：修改属性内容，可简写：…
事件绑定v-on:形同于@
计算属性

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <!-- 一般写法，无论值是否修改都会多次进行匹配 -->
   <h1>{{firstname+lastname}}</h1>
   <!-- 计算属性 -->
   <h1>{{fullname}}</h1>
   <!-- 显示music逆序 一般情况-->
   <h1>{{word.split("").reverse().join("")}}</h1>
   <!-- 计算属性 -->
   <h1>{{reverseWord}}</h1>
  </div>
  <script type="text/javascript">
   var app=new Vue({
    el:"#app",
    data:{
     firstname:"张",
     lastname:"三",
     word:"music"
    },
    computed:{
     fullname:function(){
      console.log(this)
      //会将计算结果进行缓存，只要变量内容不改变，就不会重新计算
      return this.firstname+this.lastname
     },
     reverseWord:function(){
      return this.word.split("").reverse().join("")
     }
    }
   })
  </script>
 </body>
</html>