写在前面的话:

文章是个人学习过程中的总结,为方便以后回头在学习。

文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流。


VUE基础系列目录

《VUE基础系列(一)——VUE入坑第一篇》

《VUE基础系列(二)——VUE中的methods属性》

《VUE基础系列(三)——VUE模板中的数据绑定语法》

《VUE基础系列(四)——VUE中的指令(上)》

《VUE基础系列(五)——VUE中的指令(中)》


一.v-model

v-model是作用于input/textarea等表单控件的双向数据绑定指令,当我们修改表单元素的内容,会自动的更新vue中的数据

#示例 

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<input v-model='msg' type='text'/>
<br>
这里是msg的值:{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: 'hello'
}
});
</script>
</body>
</html>

#结果

  我们可以清楚的看到,当我们改变了input输入框的内容时,数据自动的更新到了msg中,相应的输入框下方的的值也发生了变化,这就是v-model的特性。

二.v-show

v-show称为vue中的条件渲染,它可以控制元素的隐藏和显示:通过元素的display属性值去控制。用法也比较简单,我们直接看示例。

#示例

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<h1 v-show='hideValue'>我是一段文本,会被隐藏</h1>
<h1 v-show='showValue'>我是一段文本,会正常显示</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
showValue: true,
hideValue: false
}
});
</script>
</body>
</html>

#结果

  可以看到,当v-show中的表达式的值为真时,文本会正常显示;为假时,元素会添加一个内联元素:display:none;

注意:在javascript中,表达式的条件为真不只是它的值为true,为假的也不一定是false。

三.v-if / v-else /v-else-if

  v-if也是属于vue中的条件渲染指令,作用同v-show一样用于控制元素的显示和隐藏,不一样的是v-if的javascript表达式为假时,元素不会存在于DOM文档中的。

#示例

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-if='isDisplay'>isDisplay为真</h1>
<h1 v-if='hideValue'>hideValue为假,该元素不会显示在界面上,也不会出现在DOM文档中</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
isDisplay: true,
hideValue: false
}
})
</script>
</body>
</html>

#结果

  可以看到hideValue为假,所以对应的h1元素并没有存在于DOM文档中。

四.v-for

  v-for指令用于循环渲染一组数据(数组或者对象)。下面我们使用v-for指令输入一下数组和对象的值。

#v-for循环数组

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for='item in arr'>
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: ['今天','起床','很早','心情','不错']
}
})
</script>
</body>
</html>

  v-for除了循环出每一个数组元素item之外,还支持第二个参数作为数组的下标。

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<ul>
<li v-for='(item,index) in arr'>下标为{{index}}的数据为:{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: ['今天','起床','很早','心情','不错']
}
})
</script>
</body>
</html>

#v-for循环对象

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 循环对象:第一种 -->
<ul>
<li v-for='item in obj'>{{item}}</li>
</ul> <!-- 循环对象:第二种 -->
<ul>
<li v-for='(item,key) in obj'>{{key}}:{{item}}</li>
</ul> </div> <script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: ['今天','起床','很早','心情','不错'],
obj:{
name: 'test',
age: 20,
desc: '坚持就是苦逼'
}
}
})
</script>
</body>
</html>

五.v-on

v-on指令用于监听元素的事件,在事件触发时,可以执行一个javascript表达式或者执行一个javascript函数。

#基本的语法

<el on:click="javascript表达式或者javascript函数">  </el>

或者

<el @click="javascript表达式或者javascript函数">  </el>

#示例

<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="clickMe">点击我,我会调用一个函数</button>
<hr>
<button v-on:click="counter++">点击我,count就会加1</button>
<p>counter = {{counter}}</p>
<hr>
v-on:的另外一种写法@click
<button @click="counter++">点击我,count就会加1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
counter: 0
},
methods: {
clickMe: function(){
// 事件对象
console.log(event);
// 事件绑定的元素
console.log(event.target); }
}
})
</script>
</body>
</html>

六.总结

  • v-model指令作用于表单控件,有双向数据绑定的效果
  • v-show为条件渲染指令用于控制元素的隐藏和显示:通过元素的display属性值去控制
  • v-if/v-else/v-else-if为条件渲染指令用于控制元素的隐藏和显示:v-if的javascript表达式为假时,元素不会存在于DOM文档中
  • v-on指令用于监听元素的事件

Vue基础系列(五)——Vue中的指令(中)的更多相关文章

  1. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. Vue基础系列(三)——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  4. 【C++自我精讲】基础系列五 隐式转换和显示转换

    [C++自我精讲]基础系列五 隐式转换和显示转换 0 前言 1)C++的类型转换分为两种,一种为隐式转换,另一种为显式转换. 2)C++中应该尽量不要使用转换,尽量使用显式转换来代替隐式转换. 1 隐 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  6. Vue基础(环境配置、内部指令、全局API、选项、内置组件)

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  7. Vue基础之初识Vue

    Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...

  8. web基础系列(五)---https是如何实现安全通信的

    https是如何实现安全通信的 如果有不正确的地方,还望指出! web基础系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 回顾 总结几个概念(具体描述可以看上一篇文章) 数字 ...

  9. 夯实Java基础系列10:深入理解Java中的异常体系

    目录 为什么要使用异常 异常基本定义 异常体系 初识异常 异常和错误 异常的处理方式 "不负责任"的throws 纠结的finally throw : JRE也使用的关键字 异常调 ...

随机推荐

  1. WPF 自定义的窗口拖动

    WPF原有的窗口样式太丑,当我们重新定义窗口时,则需要添加一些额外的功能,如拖动~ 1.在界面上对布局元素如Grid,添加委托事件: MouseLeftButtonDown="UIEleme ...

  2. C#的接口

    什么是接口?其实,接口简单理解就是一种约定,使得实现接口的类或结构在形式上保持一致.个人觉得,使用接口可以使程序更加清晰和条理化,这就是接口的好处,但并不是所有的编程语言都支持接口,C#是支持接口的. ...

  3. window.returnValue跨域传值问题[转]

    主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因 ...

  4. docke跨主机通信之gre隧道

    GRE简介 GRE可以对网络层的任何协议来进行封装,类似LVS的IPIP协议,在原有的数据报上增加GRE协议数据报.然后在网络上传输,到达对端后,解开GRE数据报头,得到真实的数据报.其中的mac地址 ...

  5. ☀【单位】REM

    CSS3的REM设置字体大小 支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+.Apple Safari 5+.Google Chrome.IE9+和Opera11+.只是可怜的 ...

  6. 一些as的配置

    打开Android Studio首选项对话框(Mac用户选择Android Studio菜单,Windows用户选择File → Settings菜单).分别展开Editor和Code Style选项 ...

  7. 为什么选择使用 Dropbox 而不是其他品牌同步工具(不要加上多余的功能,要极致和专注)

    作者:吴锋链接:http://www.zhihu.com/question/19646859/answer/14707821来源:知乎著作权归作者所有,转载请联系作者获得授权. 窃以为楼主的问题,准确 ...

  8. JQ 事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. iOS10以下版本不支持swiper

    解决办法,降低swiper4*版本引用低版本如3.4.2可以兼容iOS8,

  10. stark组件之pop页面,按钮,url,页面

      1.Window open() 方法 2.admin的pop添加按钮 3.stark之pop功能 3.知识点总结 4.coding代码 1.Window open() 方法 效果图   2.adm ...