前端 · Vue
_Mores
多读书,多睡觉
展开
-
Vue · 通过属性绑定为元素设置样式
一、使用class样式1、数组<h2 :class=['blue','small']>哈哈哈我是个h2</h2>2、数组中使用三元表达式<h2 :class="['blue','small',isactive?'active':'']">哈哈哈我是个h2</h2>3、数组中嵌套对象在数组中用嵌套对象来代替三元表达式,提高...原创 2020-03-12 16:34:16 · 508 阅读 · 0 评论 -
Vue · v-model实现简易计算器
通过用v-model来实现简易计算器【代码实现】<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Vue学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dis...原创 2020-03-12 15:53:58 · 930 阅读 · 0 评论 -
Vue · v-model实现双向数据绑定
v-bind与v-model的示例【代码实现】<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Vue学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist...原创 2020-03-12 15:31:35 · 182 阅读 · 0 评论 -
Vue · v-on和事件修饰符(.stop .prevent .capture .self .once)
一、事件修饰符.stop 阻止冒泡.prevent 组织默认事件.capture 添加事件侦听器时使用事件捕获模式.self 只当事件在该元素本身(比如不是子元素)触发时触发回调.once 事件只触发一次二、事件修饰符的使用(1).stop在没使用.stop时,默认是冒泡机制.stop阻止所有冒泡行为【代码实现-无.stop】<!DOCTY...原创 2020-03-12 14:58:23 · 1455 阅读 · 1 评论 -
Vue · 走马灯效果
步骤分析:1、给开始按钮绑定一个事件2、在按钮的事件处理函数中:拿到msg字符串,然后调用字符串的substring进行截取。第一个字符取出追加到最后的位置3、为实现走马灯的动态效果,把步骤2的代码放到定时器中,按下按钮后可以自行走马灯<!DOCTYPE html><html> <head> <meta charset...原创 2020-03-06 22:00:37 · 602 阅读 · 0 评论 -
Vue · v-bind, v-on的用法
v-bind用于绑定属性,使用时可以由原本的 v-bind: 简写为 : 使用v-bind中也可以写合法的JS表达式,如下例,把v-bind:title="mytitle"写成v-bind:title="mytitle + '123' "也可正常使用<!DOCTYPE html><html> <head> <met...原创 2020-03-06 21:09:36 · 214 阅读 · 0 评论 -
Vue · v-cloak, v-text, v-html的用法
插值表达式闪烁问题<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <p>{{ msg }}...转载 2020-03-06 20:57:21 · 134 阅读 · 0 评论