Vue中计算属性案例

最新推荐文章于 2024-05-17 14:32:46 发布

终会为一

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量432

点赞数 10

分类专栏： vue.0+vue3.0全套学习目录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_73992463/article/details/134968817

版权

vue.0+vue3.0全套学习目录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

案例一：通过插值语法实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名案例_插值语法实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 准备一个盒子 -->
  <div id="root">
    姓: <input type="text" v-model:value="firstName"><br><br>
    名: <input type="text" :value="lastName"><br><br>
    全名  : <span>{{firstName + '-' + lastName}}</span>
    <!-- <span>{{firstName}}-{{lastName}}</span> -->
  </div>  
</body>
<script text="text/javascript">
  Vue.config.producttionTip = false //阻止Vue在启动的时候生成生产提示
  new Vue ({
    el:'#root',
    data:{
      firstName:'张',
      lastName:'三'
    }
  })
</script>
</html>

案例二：通过methods实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名案例_methdos实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 准备一个盒子 -->
  <div id="root">
    姓: <input type="text" v-model:value="firstName"><br><br>
    名: <input type="text" :value="lastName"><br><br>
    全名  : <span>{{fullName()}}</span>
    <!-- <span>{{firstName}}-{{lastName}}</span> -->
    <!-- <span>{{firstName + '-' + lastName}}</span> -->
    <!-- <button @click="fullName">点就死</button> -->
  </div>  
  
</body>
<script text="text/javascript">
  Vue.config.producttionTip = false //阻止Vue在启动的时候生成生产提示
  new Vue ({
    el:'#root',
    data:{
      firstName:'张',
      lastName:'三'
    },
    methods:{
      fullName(){
        return this.firstName +'-'+this.lastName
      }
    },
  })
</script>
</html>