文档章节

分针网——每日分享:Vue 指令总结

起风了夏天
 起风了夏天
发布于 2017/07/11 11:20
字数 727
阅读 3
收藏 0

更多文章:www.f-z.cn

v-if命令--根据条件决定是否渲染某元素

v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;v-if指令只渲染他身后表达式为true的元素;

 

<div id="example01">

<p v-if="male">Male</p>

<p v-if="female">Female</p>

<p v-if="age>25">Age:{{age}}</p>

</div>

<script>

var vm= new Vue({

el:"#example01",

data:{

male:true,

female: false,

age:29,

}

})

</script>

 

结果

 

 

v-if 的等号右边呢就是一个条件语句。这个条件呢和data里的对应位置进行比对,如果是真的true,就会渲染该元素

 

v-show

 

v-show和v-if功能一样,但是原理不一样

v-if 和 v-show的区别 - 一点点ning0_o - CSDN博客

v-if是删除或者保留dom元素

v-show是控制css中的diaplay:none属性。

虽然结果是一样的额,但是实现路径是不一样的。

 

v-for

 

遍历,最常见的当然是遍历数组。如下people是个数组,数组的内容在data里给予。

 

 

<div id="example03">

<table>

<thead>

<tr>

<th>Name</th>

<th>Age</th>

<th>Sex</th>

</tr>

</thead>

<tbody>

<tr v-for="person in people">

<td>{{ person.name }}</td>

<td>{{ person.age }}</td>

<td>{{ person.sex }}</td>

</tr>

</tbody>

</table>

</div>

<script>

var vm = new Vue({

el: '#example03',

data: {

people: [{

name: 'Jack',

age: 30,

sex: 'Male'

}, {

name: 'Bill',

age: 26,

sex: 'Male'

}, {

name: 'Tracy',

age: 22,

sex: 'Female'

}, {

name: 'Chris',

age: 36,

sex: 'Male'

}]

}

})

</script>

 

结果

 

 

v-on监听dom事件

 

如果某个dom元素被点击或者其他,那么调用一个函数,就这个意思。

如下,给button元素绑定了一个click。v-on可以缩写为@。

然后和之前命令不同的是。这个函数的具体内容是在methods对象中定义的。

 

 

<div id="app">

<button v-on:click="say('hi')">Say hi</button>

<button v-on:click="say('what')">Say what</button>

</div>

<script>

new Vue({

el: '#app',

data:app,

methods: {

//在 `methods` 对象中定义方法

say: function (xx) {

alert(xx)

}

}

})

</script>

 

v-on 绑定事件时,函数名加括号和不加括号有什么区别? - 知乎

事件处理器 — Vue.js

 

v-bind--属性绑定

 

作用就是决定是否对某元素应用某个class。(因为一般某个元素可能有好几个class)

当然,v-bind并非只能绑定class属性,而是说它主要用于绑定class属性。

Vue- 对象语法 v-bind:class与对象语法的使用(重要) - 纯黑的身心博客 - CSDN博客

 

 

<style>

.Color{

color: red;

}

.Size{

font-size: 30px;

}

</style>

<div id="app">

<span v-bind:class="{'Color':xx1, 'Size':xx2}">我是字</span>

</div>

<script>

  new Vue({

  el: "#app",

  data:{

  xx1:true,

//设置了xx1为true,然后你把true带入到 html代码里有xx1的地方,也就是Color:true。也就是说span元素有color这个class

  xx2:false

  }

  })

</script>

 

结果

 

我们可以传给 v-bind:class 一个对象,以动态地切换 class 。

v-bind:class="classProperty" 中,v-bind 是指令,: 后面的 class 是参数,而 classProperty 则在官方文档中被称为“预期值”

v-model

用于双绑定

总结

重点理解下v-bind和v-model。这两个是vue特意加的

 

 

 

本文转载自:http://www.f-z.cn/id/283

起风了夏天
粉丝 1
博文 10
码字总数 23
作品 0
崇明
私信 提问
2019 前端面试 | Vue.js 专题

前端一万小时” 所有,欢迎转载! 转载请注明出处,未经同意,不可修改文章内容。复制代码 🚀本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引, 含未公开发布和写作中的...

itsOli
06/15
0
0
MVVM 开发总结 —— Vue 组件(你所需要知道的)

随着模块化开发的理念越来越被开发者所重视,如何快速高效的开发项目成为了开发中所要注意的重点。在vue.js中组件系统作为一个重要的概念,它提供的组件可以独立、重复的使用来构建大型的应用...

小和子茶
2018/07/17
0
0
设计模式在vue中的应用(四)

前言 目录整理: 设计模式在vue中的应用(一) 设计模式在vue中的应用(二) 设计模式在vue中的应用(三) 设计模式在vue中的应用(四) 为什么要写这些文章呢。正如设计模式(Design Patter...

hailx
02/13
0
0
Vue解析--如何应对面试官提问

近期不断面试中,面试官都会提一些关于Vue相关的源码和“全家桶”之类的问题。那么针对这些提问,我们应该如何更好应答呢?在这里我把对Vue的理解整理出来供大家来参考。 1.Vue是什么? Vue是...

DIVI
2018/10/08
0
0
vue项目如何刷新当前页面的方法_vue.js_脚本之家

vue项目如何刷新当前页面的方法 更新时间:2018年05月18日 16:41:06 作者:敲代码的小老头 我要评论 这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,...

这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2018/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象编程

1、类和对象 类是对象的蓝图和模板,而对象是实例;即对象是具体的实例,类是一个抽象的模板 当我们把一大堆拥有共同特征的对象的静态特征(属性)和动态特征(行为)都抽取出来后,就可以定...

huijue
今天
9
0
redis异常解决 :idea启动本地redis出现 jedis.exceptions.JedisDataException: NOAUTH Authentication required

第一次安装在本地redis服务,试试跑项目,结果却出现nested exception is redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required错误,真是让人头疼 先检查一...

青慕
今天
20
0
Spring 之 IoC 源码分析 (基于注解方式)

一、 IoC 理论 IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入。 二、IoC方式 Spring为IoC提供了2种方式,一种是基于xml...

星爵22
今天
28
0
Docker安装PostgresSql

Docker安装PostgresSql 拉取docker镜像 # docker pull postgres:10.1010.10: Pulling from library/postgres9fc222b64b0a: Pull complete 38296355136d: Pull complete 2809e135bbdb: Pu......

Tree
今天
12
0
内容垂直居中

方法一: 采用上下 padding 形式,将内容放置在垂直居中 .line { padding: 2% 0; text-align: center; height: 5px;} <div class="line"> 内容垂直居中</div> 方法二: 采......

低至一折起
今天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部