Vue条件循环判断+计算属性+绑定样式v-bind的实例


Posted in Javascript onSeptember 18, 2018

Vue.js条件与循环

1、条件判断

(1)v-if,

<div id="app">
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
     <h1>菜鸟教程</h1>
  </template>
</div>
 
<script>
 new Vue({
   el:'#app',
   data:{
      seen:true,
      ok:true
   }
 });
</script>

(2)v-else-if

(3)v-else

<div id="app">
  <div v-if="type === 'A' ">A</div>
  <div v-else-if="type === 'B' ">B</div>
  <div v-else="type === 'C' ">C</div>
</div>
 
<script>
  new Vue({
   el:'#app';
   data:{
      type:'C'
   }
  });
</script>

(4)v-show

除了v-if、v-else-if、v-else,还可以使用v-show指令来根据条件展示元素

<div id="app">
  <h1 v-show="ok">Hello</h1>
</div>
 
<script>
 new Vue({
   el:'#app',
   data:{
     ok:true
   }
 });
</script>

2、循环语句

使用v-for指令

(1)简单的v-for

<ol>
  <li v-for="site in sites">{{ site.name }}</li>
 </ol>

(2)模板中的v-for

<template v-for="site in sites">
      <li> {{ site.name }} </li>
      <li> ----- </li>
    </template>

综合小案例,如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.min.js" ></script>
 </head>
 <body>
 <div id="app">
  <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
  </ol>
  
  <!--利用模板化template进行循环-->
  <ul>
  <template v-for="site in sites">
   <li>{{ site.name }}</li>
   <li>-------</li>
  </template>
  </ul>
 </div>
 
 <script>
  new Vue({
   el:'#app',
   data:{
   sites:[
    {name:'Zhao'},
    {name:'Xiao'},
    {name:'yan'}
   ]
   }
  });
 </script>
 </body>
</html>

(3)v-for迭代对象

a.一个参数

原理:<li v-for="value in object"> {{ value }}

b.两个参数

原理:<li v-for="(value,key) in object" > {{ key }} : {{ value }}

(4)v-for迭代整数

<div id="app">
 <ul>
  <li v-for="n in 10">
   {{ n }}
  </li>
 </ul>
</div>
 
 
<script>
new Vue({
 el: '#app'
})
</script>

3、计算属性computed

计算属性主要适用于一些复杂的逻辑关系,

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>计算属性</title>
 <script type="text/javascript" src="js/vue.min.js" ></script>
 </head>
 <body>
 <div id="app">
  <p>原始字符串:{{message}}</p>
  <p>计算后反转字符串:{{reversedMessage}}</p>
 </div>
 
 <script>
  var vm=new Vue({
  el:'#app',
  data:{
   message:'Runoob'
  },
  computed:{
   //计算属性reversedMessage的getter
   reversedMessage:function(){
   //this指向vm实例
   return this.message.split('').reverse().join('');
   }
  }
  })
 </script>
 </body>
</html>

由于computed用于计算属性,而reversedMessge相对于computed的属性的获得,其this指向的是vm的实例,当message发生改变的时候,对应的reversedMessage也会发生相对应改变。

扩展:computed VS methods

由于computed与methods实现效果相同,所以也可以使用methods来替代computes,

区别如下:

a、computed基于它的依赖缓存,只有相关依赖发生改变时,才会重新取值;

b、methods而言,在重新渲染的时候,函数总会重新调用执行。

可以说computed性能会更好,但若不希望缓存,可以使用methods属性

4、样式绑定

在vue中由于class与style是HTML元素的属性,用于设置元素的样式,可以用v-bind来设置样式属性

实例1:

<div v-bind:class="{active:isActive}"></div>

等价于

<div class="active">

(1)vue.js.style(内联样式)

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.min.js" ></script>
 </head>
 <body>
 <div id="app">
  <div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">菜鸟教程</div>
 </div>
 
 <script>
  new Vue({
  el:'#app',
  data:{
   activeColor:'green',
   fontSize:30
  }
  })
 </script>
 </body>
</html>

(2)使用数组将多个样式对象应用到一个元素上

<div v-bind:style="[baseStyles,overridingStyles]">菜鸟教程</div>
    <script>
       new Vue({
 el:'#app',
        data:{
  baseStyles:{ 
  color:'green',
  fontSize:'30px'
  },
  overridingStyles:{
  'font-weight':'blod'
  }
 }
       })
    </script>

以上这篇Vue条件循环判断+计算属性+绑定样式v-bind的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
详解iframe与frame的区别
Jan 13 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
WebPack基础知识详解
Jan 16 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 #Javascript
记React connect的几种写法(小结)
Sep 18 #Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 #Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 #Javascript
JavaScript指定断点操作实例教程
Sep 18 #Javascript
对VUE中的对象添加属性
Sep 18 #Javascript
微信小程序适配iphoneX的实现方法
Sep 18 #Javascript
You might like
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
浅谈php的优缺点
2015/07/14 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python 实现超级玛丽游戏
2020/11/25 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
2016年元旦寄语
2015/08/17 职场文书
同学会演讲稿
2019/04/02 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python