Vueday2

文章目录

Vueday2
- Vue指令(续)
- - v-show
  - v-if
  - v-bind
  - v-for
  - v-model
- ==案例1==：小黑记事本

Vue指令(续)

v-show

v-show指令的作用是根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

v-if

作用:根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false从dom树中移除
频繁的切换使用v-show，反之使用v-if，前者的切换消耗小

v-bind

v-bind:属性名=表达式

v-bind指令作用是：为元素绑定事件
完整写法是：v-bind:属性名
简写的话可以直接省略v-bind，只保留:属性名
需要动态的增删class建议使用对象的方式

v-for

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是==(item,index) in 数据==
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应的

v-model

v-model指令的作用:获取和设置表单元素的值(双向数据绑定)
绑定的数据会和表单元素值相关联

案例1：小黑记事本

样式存在不足，功能基本实现。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue学习</title><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>div{width: 365px;border: 1px solid #ccc;background-color: #f5f5f5;box-shadow: 2px 2px 2px grey;margin-top: 100px;margin-left: 100px;}#app1{width: 365px;height: 200px;position: absolute;left: 13px;top:13px;z-index: -1;}#app2{width: 365px;height: 200px;position: absolute;left: 18px;top:18px;z-index: -2;}input{margin-top: 10px;margin-left: 40px;height: 40px;border: 0px;font-size: 22px;border-bottom: 1px solid #ccc;background-color: #f5f5f5;}li{width: 290px;height: 30px;font-size: 16px;margin-top: 10px;border-bottom:1px solid #ccc; list-style: none;position: relative;}#show{display: inline-block;width: 180px;white-space:nowrap;overflow: hidden;text-overflow :ellipsis;}span{color: grey;font-size: 12px;}#del{position: absolute;right: 10px;cursor: pointer;}#count{margin-left: 40px;}#but{cursor: pointer;margin-left: 180px;}#but:hover,#del:hover{color: #000;}</style></head><body><div id="app" ref="height1"><input v-model="inputValue"  @keyup.enter="add" type="text" autofocus="autofocus"  placeholder="请输入内容！"/><ul><li v-for="(item,index) in list">          <!--使用v-for根据数据生成列表结构--><span id="show" >{{index+1}}.{{item}}</span>      <!--用{{index+1}}显示数据的索引以及数据的每一项--><span id="del" @click="remove(index)">&times;</span>            <!--&times;被转义成X--></li></ul><span id="count" v-if="list.length!=0">共计<strong>{{ list.length }}</strong>条笔记</span><span id="but" @click="clear()" v-show="list.length!=0">清空</span></div><script>var app = new Vue({el:"#app",data:{list:["I am iron man","爱的魔力看星星","5Galaxy"],inputValue:""   },methods: {add:function(){   //添加数据方法，使用v-on和keyup.enter事件绑定this.list.push(this.inputValue);},  remove:function(index){this.list.splice(index,1);},clear:function(){this.list = [];}}})</script></body>
</html>

Vue指令(续)、小黑记事本案例相关推荐

黑马程序员VUE学习笔记-小黑记事本案例
自己写的样式,有很多不足,敬请见谅和指正.功能还是正常的. CSS部分 * {padding: 0;margin: 0; }#todoapp {width: 300px;margin: 5px aut ...
用Vue实现小黑记事本案例
用Vue实现小黑记事本案例实现内容代码介绍全部代码实现内容新增数据删除操作统计个数清空clear 隐藏在无数据时是隐藏状态代码介绍输入区域 <div id="re ...
简单的vue小demo——小黑记事本
简单的vue小demo--小黑记事本整体效果:完整代码在这里一个简单的记事本,可实现简单的添加,删除,统计,清空,隐藏. 1.新增 1.1生成列表结果(v-for数组) 1.2获取用户输入(v-m ...
Vue小黑记事本案例
1.小黑记事本效果图 2.代码展示 <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
vue本地项目——小黑记事本
B站看到了一套vue框架入门课程,敲了一个小项目(小黑记事本),欢迎批评指教. 一.实现效果输入框输入任务,按下回车键,添加到任务最后鼠标移动到某项任务,该任务后面出现红色叉号,点击可删除次任务 ...
vue案例小黑记事本详解
大家好,今天学的东西不是很多,但遇到了一个特别有趣的vue小案例吧,我觉得可以拿出来给大家伙练练手,虽然案例简单,并不复杂,但也算是涵盖了vue大部分的常用知识点,希望大家可以多练练,有助于vue的学 ...
四、VUE基础——记事本案例（小黑记事本）
一.分析记事本需要的功能记事本新增事件记事本删除事件记事本统计事件(统计记事本中事件的数量) 记事本清空事件记事本隐藏事件二.记事本案例功能实现 1.新增功能 (1).步骤写好样式后,生成 ...
Vue小案例-小黑记事本的实现
小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...

Vue指令(续)、小黑记事本案例

Vueday2

文章目录

Vue指令(续)

v-show

v-if

v-bind

v-for

v-model

案例1：小黑记事本

Vue指令(续)、小黑记事本案例相关推荐

最新文章

热门文章