Vue学习--Day3

最新推荐文章于 2024-11-01 14:22:21 发布

献_

最新推荐文章于 2024-11-01 14:22:21 发布

阅读量247

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45726044/article/details/113726873

版权

Day3目录

一、v-bind指令
二、计算属性

一、v-bind指令

v-bind主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。
Vue官方提供了一个简写方式 :bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

1.绑定 HTML src/href

<div id="hey">

  <h2>{{message}}</h2>
  <!-- 错误写法 -->
<!--  <img src="{{Asrc}}" alt="">-->
  <!-- 正确写法 -->
  <img v-bind:src="Asrc" alt=""><br>
  <a v-bind:href="Ahref">百度一下</a>

</div>
<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊!',//数据
      Asrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1690959788,2747822007&fm=15&gp=0.jpg',
      Ahref:'http://www.baidu.com'
    }
  })
</script>

在这里插入图片描述

2.绑定 HTML Class

对象语法

给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令可以与普通的class特性共存


  <style>
    .active{
      color:red;
    }
    .fontFamily{
      text-decoration:underline
    }
  </style>
  
<div id="hey">

  <h2>{{message}}</h2>
  <!--  普通写法-->
  <h2 class="active">{{message}}</h2>
  <!--<h2 v-bind:class="类名1：true, 类名2：boolean"></h2>-->
  <h2 :class="{active:isActive,fontFamily:isfontFamily}">{{message}}</h2>
</div>

<script src="../vue.js"></script>

<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊!',//数据
      isActive: true,
      isfontFamily: true

    }
  })
</script>

在这里插入图片描述动态改变

数组语法

我们可以把一个数组传给v-bind:class，以应用一个class列表


<div id="hey">
  <h2>{{message}}</h2>
  <h2 class="active">{{message}}</h2>
  <!-- 数组形式 []中值加""，则为常量，不加"",则为变量-->
  <h2 class="fontFamily" :class="[active,font]">{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊!',//数据
      active:'aaaaaa',
      font: 'bbb'

    }
  })
</script>

3.绑定 HTML style(内联样式)

对象语法

v-bind:style 的对象语法十分直观–非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用短横分隔命名法），但是用短横分隔是会报错的

<div id="hey">

  <h2>{{message}}</h2>
<!--  <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
<!--  key后的属性要加单引号，不然会被当做变量-->
  <h2 :style="{fontSize: '50px'}">{{message}}</h2>
  <h2 :style="{fontSize: finalSize}">{{message}}</h2>
  <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>

</div>
<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊!',//数据
      finalSize:'100px',
      finalColor:'blue'

    }
  })
</script>

数组语法

可将多个样式对象应用到一个元素上

<div id="hey">

  <h2>{{message}}</h2>
<!--  <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
<!--  key后的属性要加单引号，不然会被当做变量-->
  <h2 :style="[finalSize,finalColor]">{{message}}</h2>

</div>
<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊!',//数据
      finalSize:{fontSize: '50px'},
      finalColor: {color:'blue'}

    }
  })
</script>

在这里插入图片描述

二、计算属性

1.定义

在模板中可以直接通过插值语法显示一些data中的数据，但在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
计算属性是vue实例中的一个配置选项：computed
通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

2.使用方法

例：计算书本的总价格

<div id="hey">

  <h2>总价格:{{totalPrice}}</h2>
  
</div>
<script src="../vue.js"></script>
<script>
  //ES6中 let(变量)/const(常量)
  const app = new Vue({
    el: '#hey', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊!',//数据
      books:[
        {id:1,name:'数据结构',price:119},
        {id:2,name:'计算机网络',price: 120},
        {id:2,name:'算法设计与分析',price:100}
      ]
    },
    computed:{
      totalPrice:function () {
        let result=0;
        for(let i=0;i<this.books.length;i++){
          result+=this.books[i].price
        }
        return result;

      }
    }
  })
</script>