Jmeter element typora serialization import enums binding insert xampp drupal7 Zeptojs Notify.js progressjs vue表单 vue响应式布局 网站后台管理模板 jquery延时 oracle无效的列索引 python与机器学习 spark数据清洗 mac上传文件到linux less比较级 linux查看jdk安装路径 plsql连接mysql kubernetes官网 python输出 python加注释 python连接mysql数据库 python免费教程 python获取输入 java入门级教程 java集成 java中泛型 java集合遍历 java自定义异常 java读取文件数据 linux用户管理 网站后台模板 mac地址修改器 行业软件下载
当前位置: 首页 > 学习教程  > python

Vue学习--Day3

2021/2/8 15:55:47 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

Day3目录一、v-bind指令1.绑定 HTML src/href2.绑定 HTML Class3.绑定 HTML style(内联样式)二、计算属性1.定义2.使用方法3.总结一、v-bind指令 v-bind主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等&…

Day3目录

  • 一、v-bind指令
    • 1.绑定 HTML src/href
    • 2.绑定 HTML Class
    • 3.绑定 HTML style(内联样式)
  • 二、计算属性
    • 1.定义
    • 2.使用方法
    • 3.总结

一、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>

3.总结

  • 计算属性一般就是用来通过其他的数据算出一个新数据,而且它有一个好处就是,它把新的数据缓存下来了,当其他的依赖数据没有发生改变,它调用的是缓存的数据,这就极大的提高了我们程序的性能。而如果写在methods里,数据根本没有缓存的概念,所以每次都会重新计算。这也是为什么这里我们没用methods的原因

参考:
https://www.cnblogs.com/liuchuanfeng/p/6742631.html
https://www.jianshu.com/p/350c8af3ac28
https://www.bilibili.com/video/BV15741177Eh?t=72&p=21


本文链接: http://www.dtmao.cc/news_show_2000373.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?