Vue学习第一天

最新推荐文章于 2024-04-27 11:24:07 发布

是楷不是凯

最新推荐文章于 2024-04-27 11:24:07 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/weixin_44616545/article/details/107311783

版权

Vue学习第一天

Vue第一天学习，一些基本的指令。

Vue第一天学习，一些基本的指令。

v-once：只有初始化的时候显示，其他不改变。

因为Vue是响应式的，所以当我们引入的变量的值发生改变时，页面也会发生改变，如果我们的需求是：只有初始化的时候显示，而不让以后发生改变 就可以使用这个标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
  <h2 v-once>{{message}}</h2>
  <h2>{{message}}</h2>
  <h2>{{lastname+firstname}}</h2>
  <h2>{{lastname + ' ' +firstname}}</h2>
  <h2>{{counter+20}}</h2>
</div>


</body>


<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['星际穿越', '大话西游', '少年拍', '盗梦空间'],
      lastname:'james',
      firstname:'lebulang',
      counter:20
    }
  })

</script>
</html>

在这里插入图片描述

不管是v-once，v-pre，v-text都是修改文本文本框内的内容，但但是，除了内容需要动态显示外，有些属性也是需要动态显示的，这时候就需要我们的v-bind标签

在这里插入图片描述

v-bind : 动态绑定图片：语法糖：只要一个：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
  <img v-bind:src="imgurl"></img>
  // 语法糖
  <img :src="imgurl"></img>
  <h2>{{mes}}</h2>
</div>

</body>
<script>
  const app = new Vue({
    el:'#app',
    data:{imgurl:'https://s1.ax1x.com/2020/07/13/UGXHF1.jpg',
          mes:'智慧哨兵'
    }
  })
</script>
</html>

效果图：
在这里插入图片描述

v-bind 对于class的修饰

在这里插入图片描述

在这里插入图片描述
此时三个名字都在，因为默认设置为true，如果我们改变为false

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="../js/vue.js"></script>
<style>
  .active{
    color: red;
  }
</style>
<body>
<div id="app">
 <h2 class="title" :class="{active:isActive,line:isLine}"> {{mes}}</h2>
  <button @click="changeColor">点击</button>
</div>

</body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      mes:'智慧哨兵',
      isActive:true,
      isLine:true
    },
    methods:{
      changeColor:function () {
        this.isActive=!this.isActive;
        this.isLine=!this.isLine;
      }
    }
  })
</script>
</html>

计算属性：computed：将方法当作是一个属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
  <h2>{{firstname+' '+lastname}}</h2>
  <h2>{{getFullname()}}</h2>
  // 计算属性不需要 ()
  <h2>{{Fullname}}</h2>
</div>

</body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      firstname:'Lebron',
      lastname:'james'
    },

    // 计算属性
    computed:{
      Fullname(){
        return this.firstname+ ' ' + this.lastname
      }
    },
    methods:{
      getFullname(){
        return this.firstname+ ' ' + this.lastname
      }
    }
  })
</script>
</html>

在这里插入图片描述

小案例：通过计算属性计算商品的总价，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">

  <h2>商品的总价格为：{{totalPrice}}</h2>
</div>

</body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      books:[
        {id:110,name:'Linux编程大全',price:110},
        {id:111,name:'Spring',price:120},
        {id:112,name:'SpringMVC',price:130},
        {id:113,name:'SpringBoot',price:140}
      ]
    },
    /*计算属性*/
    computed:{
      totalPrice:function(){
        let total=0;
        for (let book of this.books) {
          total += book.price;
        }
        return total;
      }
    }
  })
</script>
</html>

在这里插入图片描述

是楷不是凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习第一天

Vue学习第一天Vue第一天学习，一些基本的指令。v-once：只有初始化的时候显示，其他不改变。不管是v-once，v-pre，v-text都是修改文本文本框内的内容，但但是，除了内容需要动态显示外，有些属性也是需要动态显示的，这时候就需要我们的v-bind标签v-bind : 动态绑定图片：语法糖：只要一个：v-bind 对于class的修饰计算属性：computed：将方法当作是一个属性小案例：通过计算属性计算商品的总价，Vue第一天学习，一些基本的指令。v-once：只有初始化的时候显
复制链接

扫一扫