vue基础小节 v-mode属性双向绑定 跑马灯 十秒挑战 计算器 v-for和key属性 v-if与v-show用法区别 tap切换
2024-04-24 10:40:47
vue代码基本结构
<!-- 视图层 --><div class="app"><!-- 差值表达式 --><div>{{mge}} {{message}}</div><div v-text="textvue"></div><div v-html="htmlvue"></div><button v-on="log1">按钮</button><!--@='click' 也可以-->></div>
let vm = new Vue({//控制区域el: '.app',//数据data: {mge: 'Hello Word',message: '123',textvue: '456',htmlvue: '789'},//方法methods: {log1() {console.log(11111);}}})
1，防止界面闪烁
[v-cloak] {display: none;}
<div id="app"><div v-cloak>{{msg}}</div><button @click="log1">按钮</button></div>
let vm = new Vue({el: '#app',data: {msg: '你好世界',},methods: {log1() {console.log(111);}}})
2，v-bind v-on 绑定元素属性，绑定事件
<div id="app"><!-- v-bind 绑定元素属性 --><!-- <img v-bind;src='imgSrc'> --><!-- v-bind 简写: --><!-- <img :src='imgSrc'> --><div class="div" :style="'background-image: url('+imgSrc+');'"></div><!-- <img :src="'https://img1.baidu.com//it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=50d3505ebf3e0214b25be0d90245340a'"> --><!-- v-on 绑定事件 --><button v-on:click="log1">打印1</button><button @click="log2">打印2</button> <button @click="change">改变图片</button></div>
let vm = new Vue({el: '#app',data: {imgSrc: 'https://img1.baidu.com//it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=50d3505ebf3e0214b25be0d90245340a'},methods: {// log1(){// console.log(111111);// },// log2(){// console.log(222222);// },change() {console.log(this);console.log(this.imgSrc);if (this.imgSrc) {this.imgSrc = ''} else {this.imgSrc = 'https://img1.baidu.com//it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=50d3505ebf3e0214b25be0d90245340a'}}}})
3，跑马灯
<div id="app"><!-- 1. 搭建静态页面2. 分析数据3. 逻辑处理--><button @click="start" :disabled="disabl">浪起来</button><button @click="stop" :disabled="!disabl">低调</button><div>{{msg}}</div></div>
let vm = new Vue({el: '#app',data: {msg: '猥琐发育，别浪~~!',timer: null,disabl: false},methods: {//开始//两种方式第二个更优start() {//按钮禁用this.disabl = !this.disabl// console.log(this.msg.substring(0, 1));// console.log(this.msg.substring(1));// //1.声明一个变量// let that = this// setInterval(function () {// console.log(that);// let start = that.msg.substring(0, 1)// let end = that.msg.substring(1)// that.msg = end + start// }, 500)//开始时清空定时器// clearInterval(this.timer)//2.箭头函数this.timer = setInterval(() => {let start = this.msg.substring(0, 1)let end = this.msg.substring(1)this.msg = end + start}, 500)},stop() {this.disabl = !this.disablclearInterval(this.timer)}}})
4，事件修饰符
header {width: 200px;height: 200px;background-color: aqua;}aside {width: 100px;height: 100px;background-color: rgb(206, 131, 39);}
<div id="app"><!-- 1, .stop阻止冒泡 --><header @click="log3"><aside @click.stop="log2"><button @click="log1">按钮</button></aside></header><!-- 2, .capture添加事件监听器时使用事件捕获模式 --><header @click="log3"><aside @click.capture="log2"><button @click="log1">按钮</button></aside></header><!--3, .self 只当事件在改元素本身（比如不是子元素）触发时触发回调 --><header @click="log3"><aside @click.self.stop="log2"><button @click="log1">按钮</button></aside></header><!-- 4, once 事件只触发一次 --><div>111111111111111111111111111111111111111111111111111111111111111</div><!-- <header @click="log3"><aside @click="log2"><button @click.once.stop="log1">按钮</button></aside></header> --><!-- 5, .prevent阻止默认事件 --><a @click.prevent.once="target" href="https://www.baidu.com">百度一下</a></div>
let vm = new Vue({el: '#app',data: {},methods: {log1() {console.log(1111111);},log2() {console.log(22222222222);},log3() {console.log(333333333333333);},target() {alert('别点了在点就跳百度了')}}})
5，v-mode数据双向绑定
#box{font-size: 40px;}
<div id="app"><input type="text" v-bind:value="value1"><input type="text" v-model:value="value1"><input type="text" v-model="value1"><button @click="getVal">按钮</button><!-- --><br><div id="box">计时器↓</div><input type="text" v-model="value1"><select name="" id="" v-model="value4"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="value2"><button @click="add">=</button><input type="text" v-model="value3"></div>
let vm = new Vue({el: '#app',data: {value1: '100',value2: '',value3: '',value4: '+',},methods: {getVal() {console.log(this.value1);},add() {if (this.value4 == '+'){this.value3 = Number(this.value1)+ Number(this.value2)}else if(this.value4 == '-'){this.value3 = Number(this.value1)- Number(this.value2)}else if(this.value4 == '*'){this.value3 = Number(this.value1)* Number(this.value2)}else if(this.value4 == '/'){this.value3 = Number(this.value1)/ Number(this.value2)}}}})
,6，Vue中样式的使用
.box {height: 100px;background-color: green; }.red {color: red;}.fs40 {font-size: 40px;}
<div id="app"><div :class="class1">我是盒子</div><div :class="['box', 'red']">我是盒子1</div><div :class="falg?'box':'red'">我是盒子2</div><div :class="class2">我是盒子3</div><div :class="{'box':false,'red':true}">我是盒子3</div><button @click="change">改变字体</button><ul><li @click="changeColor(1)" :class="index==1 ?'red':''">1</li><li @click="changeColor(2)" :class="index==2 ?'red':''">2</li><li @click="changeColor(3)" :class="index==3 ?'red':''">3</li><li @click="changeColor(4)" :class="index==4 ?'red':''">4</li></ul></div>
let vm = new Vue({el: '#app',data: {index: 1,falg: false,// class1:'box red',//数组class1: ['box', 'red'],class2: ['box', { 'red': false }],},methods: {change() {//this.class1 += ' fs40'this.class1.push('fs40')},changeColor(num) {console.log(num); this.index = num}}})
7，行内样式
<div id="app"><div :style="[style1,style2]">我是盒子</div><div :style="getStyle()">我是盒子1</div><div :style="'background-image:url('+src+')'"></div><button @click="change">按钮</button></div>
let vm = new Vue({el: '#app',data: {style1: {color: 'red'},style2: {fontSzie: '40px'},src: ''},methods: {change() {this.style1.color = 'green'this.style1.fontSzie = '40px'},getStyle() {return {color: 'red'}}}})
8，V-for和key属性
.red {color: red;}
<div id='app'><ul><li>{{list[0]}}</li><li>{{list[1]}}</li><li>{{list[2]}}</li><li>{{list[3]}}</li></ul><!-- 遍历数组 --><ul><li v-for="(item,index) in list">{{item}} -- {{index}}</li></ul><div v-for="(item,index) in courseList"><div>{{item.title}}</div></div><!-- 遍历对象 --><div v-for="(value,key,index) in obj">{{value}} -- {{key}} -- {{index}}</div><!-- 遍历数字 --><div v-for="num in 10"><div>123</div></div><div v-for="item in coursList">{{item.title}}<div v-for="item in item.section">{{item.page}}</div></div><ul><li @click="changeColor(index)" :class="index1==index ?'red':''" v-for="(item,index) in 4">{{index+1}}</li><!-- <li @click="changeColor(2)" :class="index==2 ?'red':''">2</li><li @click="changeColor(3)" :class="index==3 ?'red':''">3</li><li @click="changeColor(4)" :class="index==4 ?'red':''">4</li> --></ul></div>
const vm = new Vue({el: '#app',data: {index1: 0,list: [1, 2, 3, 4],courseList: [{title: '标题一'},{title: '标题二'},{title: '标题三'},],obj: {name: 'zs',age: 18},coursList: [{title: '标题一',section: [{page: '第01天_HTML之HTML初始'},{page: '第02天_HTML之HTML初始'},{page: '第03天_HTML之HTML初始'},]},{title: '标题二',section: [{page: '第01天_HTML之HTML初始'},{page: '第02天_HTML之HTML初始'},{page: '第03天_HTML之HTML初始'},]},]},methods: {changeColor(index) {console.log(index);this.index1 = index}}})
9，key
<div id="app"><!-- key:必须是唯一值必须是字符串或者数字作用：提高重排效率,就地复用--><div v-for="(item,index) in list" :key="item.id">{{item.title}}</div></div>
let vm = new Vue({el: '#app',data: {list: [{id: 1,title: '标题一'},{id: 2,title: '标题二'},{id: 3,title: '标题三'},]},methods: {}})
10，v-if与v-show区别
<div id="app"><!-- v-if v-showv-if:删除DOM元素v-show:隐藏元素v-if只修改一次的时候可以使用v-ifv-show频繁切换的时候可以使用v-show--><div v-if="false">123</div><div v-show="false">456</div><div v-if="age<18">未成年</div><div v-else-if="age<30">而里之年</div><div v-else-if="age<60">花甲之年</div><div v-else>老年</div></div>
let vm = new Vue({el: '#app',data: {age: 1},methods: {}})
11，计算器
<div id="app"><div id="box">计时器↓</div><input type="text" v-model="value1"><select name="" id="" v-model="value4"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="value2"><button @click="add">=</button><input type="text" v-model="value3"> </div>
let vm = new Vue({el: '#app',data: {value1: '100',value2: '',value3: '',value4: '+',},methods: {getVal() {console.log(this.value1);},add() {if (this.value4 == '+'){this.value3 = Number(this.value1)+ Number(this.value2)}else if(this.value4 == '-'){this.value3 = Number(this.value1)- Number(this.value2)}else if(this.value4 == '*'){this.value3 = Number(this.value1)* Number(this.value2)}else if(this.value4 == '/'){this.value3 = Number(this.value1)/ Number(this.value2)}}}})
12，tap切换暂时不全不是最优
* {margin: 0 auto;padding: 0;}#app {width: 100%;}select {width: 300px;height: 100px;text-align: center;font-size: 40px;display: block;background-color: bisque;}.box {text-align: center;width: 300px;height: 100px;font-size: 40px;background-color: bisque;line-height: 100px;}ul {margin-top: 10px;list-style: none;width: 1200px;height: 20px;}ul>li {text-align: center;width: 300px;float: left;background-color: bisque;}ul>li:hover {background-color: aquamarine;}.neironger {margin-top: 5px;width: 1200px;height: 300px;text-align: center;line-height: 300px;font-size: 50px;color: red;background-color: bisque;}
<div id="app"><!-- 下拉框tap切换 --><div class="=box"><select name="" id="" v-model="value1" @click="add"><option value="1">内容1</option><option value="2">内容2</option><option value="3">内容3</option></select></div><div class="box">{{nr1}}</div><!--横排tap切换 --><ul><li @click="tap(index)" v-for="(item,index) in 4">{{index+1}}</li></ul><div class="neironger">{{nr2}}</div><!-- 三木表达式 v-show 显示隐藏Tap切换 --><div class="neironger"><div v-for="(item,index) in 4" v-show="index1 == index ? true:false">内容{{index+1}}</div></div></div>
let numlet vm = new Vue({el: '#app',data: {nr1: '内容1',nr2: '内容1',value1: '1',index1: 0},methods: {add() {if (this.value1 == 1) {this.nr1 = '内容1'} else if (this.value1 == 2) {this.nr1 = '内容2'} else if (this.value1 == 3) {this.nr1 = '内容3'}},// tap切换tap(index) {// console.log(index);this.nr2 = '内容' + Number(index + 1)// 三木表达式的下标获取this.index1 = index},}})
vue基础小节 v-mode属性双向绑定 跑马灯 十秒挑战 计算器 v-for和key属性 v-if与v-show用法区别 tap切换相关推荐
- Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
- 三菱PLC中通过变址寄存器V或Z实现简单跑马灯的程序示例及说明
三菱PLC中通过变址寄存器V或Z实现简单跑马灯的程序示例及说明 首先,我们了解一下手册中关于变址寄存器V或Z的说明: 如下图所示: 程序示例: 如下图所示,为简单的跑马灯控制程序: 程序分析: 当M1 ...
- v html是双向绑定吗,vue自定v-model实现表单数据双向绑定问题
vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍vue自定v-model实现表单数据双向绑定,具体内容如下所示: 子组件代码如下 v-model语法糖 v-model实现了表单输入的双向绑 ...
- Vue基础之表单控件绑定
你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据, ...
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
- Vue专题（一）聊一聊双向绑定
双向绑定(响应式) 了解Vue中如何实现数据的响应式系统,从而达到数据驱动视图. 一.数据驱动视图? 大胆的一句话概括:视图因为它依赖的数据的变化二变化,即: UI = render(state) s ...
- CC2530基础实验：(1)按键控制LED跑马灯
文章目录 前言 一.实验相关电路图 二.实验相关寄存器 三.源码分析 前言 本实验用于学习CC2530芯片GPIO 的配置方法,Led 驱动电路及开关 Led 的原理,按键的使用,实现简单的人机交互. ...
- TextView属性大全及跑马灯效果
TextView控件常见属性: android:autoLink :设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phon ...
- vue数组双向绑定问题（数组更新检测、对象添加移除属性）
例子:三个列表数字首次渲染依次为100,200,300,点击对应的后面的按钮,要实现数字乘十,此时使用 this.arr[index]=this.arr[index]*10;进行更改的方式不起作用,改 ...
最新文章
- 通过HTTPS使用HttpClient信任所有证书
- 从程序设计角度看B/S C/S到底有什么不同？？？
- IJCAI 2020 | 淡妆浓抹总相宜之人脸上妆
- python学习高级篇(part6)--内置函数dir
- 考研408大纲22年考研
- python3主函数返回值_Python3
- Silverlight 2 中简单的2.5D控件
- 软件技术文档编写_如何编写好的软件技术文档
- 电力软件系统测试报告,电力巡检系统测试报告-软件工程
- 4位加法器四级流水线、4位加法器两级流水线以及32位加法器八级流水线设计
- 麻省理工学院公开课：计算机科学及编程导论 课堂笔记
- 安卓逆向——AS开发Xposed插件HOOK案例
- 【天光学术】信息管理论文：计算机信息管理应用于网络安全的策略（节选）
- linux 下 调笔记本亮度,Linux下如何保存笔记本屏幕亮度设置(背光亮度)
- 数电6_1——时序逻辑电路概述（很久整理的，没有下文）
- poi 启用保护后取消_关于POI锁定保护Excel表格后的操作
- codeforces1153F Serval and Bonus Proble【期望DP】
- 汇编总结（3）——程序设计初步
- “毕业季”｜一个java开发实习生的OFFER之路
- ICMP是个啥？一分钟介绍ICMP协议