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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
JQuery live函数
Dec 24 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JS代码实现table数据分页效果
May 26 Javascript
js实现前端分页页码管理
Jan 06 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
德生PL990的分析评价
2021/03/02 无线电
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python 中 Meta Classes详解
2016/02/13 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Pycharm修改python路径过程图解
2020/05/22 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
防灾减灾活动总结
2014/08/30 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
企业2014年度工作总结
2014/12/10 职场文书