![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
weixin_41201496
这个作者很懒,什么都没留下…
展开
-
vue中的v-if和v-show,页面中的判断和元素隐藏显示
v-if当值为true时,创建元素, 值为false时,删除元素用来在页面中判断<h2 v-if="flag">v-if控制的元素</h2>v-show当值为true时,显示元素,值为false时,显示元素用来操作元素的隐藏显示<h2 v-show="flag">v-show控制的元素</h2>js代码<!--导入vue.js...原创 2020-03-05 21:57:17 · 3945 阅读 · 0 评论 -
vue中的v-for循环
在页面循环输出数据html代码<p v-for="item in list1">{{ item }}</p>在页面循环输出数据 item表示值 i表示索引<p v-for="(item,i) in list1">{{ item }}</p>循环一个对象key属性必须指定一个唯一的值,在数据发生变化时保证数据的准确性<p v-f...原创 2020-03-05 21:37:48 · 630 阅读 · 0 评论 -
vue给标签绑定内联样式
html代码直接在行内使用v-bind写入一个对象,属性名如果有 - 字符,必须用引号括起来 <h1 :style="styleObj1">我是一个字符串</h1>在style中传入一个数组,数组中传入多个对象<h1 :style="[styleObj1, styleObj2]">我是一个字符串</h1>js代码<!--导入vu...原创 2020-03-05 13:23:12 · 501 阅读 · 0 评论 -
vue绑定class属性的值
css代码<style> .red{ color:red; } .thin{ foot-weight:200; } .active{ letter-spacing:0.5em; } </style>...原创 2020-03-05 13:08:52 · 1034 阅读 · 0 评论 -
vue中的switch判断语法
switch(this.val){ case "val1": //这里是值对应的处理 break case "val2": //这里是值对应的处理 break default: //这里是没有找到对应的值处理 break}原创 2020-03-04 19:41:15 · 33386 阅读 · 0 评论 -
vue使用v-model实现数据的双向绑定
使用v-model实现数据的双向绑定v-model直接替换标签中的value属性即可一般使用与表单元素,与用户交互<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><!--定义vue的操作对象-->...原创 2020-03-04 18:38:04 · 153 阅读 · 0 评论 -
vue使用once修饰符,使事件只能触发一次
使用once修饰符,使事件只能触发一次多个修饰符可以同步使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><!--定义vue的操作对象--><div id="app"> ...原创 2020-03-04 17:45:38 · 2398 阅读 · 0 评论 -
vue使用self修饰符,点击标签自身时才会触发事件
使用self修饰符,点击标签自身时才会触发事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><!--定义vue的操作对象--><div id="app"> <!-- ...原创 2020-03-04 17:41:15 · 1174 阅读 · 0 评论 -
vue使用capture修饰符捕获事件触发
使用capture修饰符捕获事件触发,可以指定事件的执行顺序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><!--定义vue的操作对象--><div id="app"> &...原创 2020-03-04 17:36:34 · 634 阅读 · 0 评论 -
vue使用prevent修饰符阻止标签的默认行为
使用prevent修饰符可以阻止标签的默认行为比如a标签,默认跳转到指定连接<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><!--定义vue的操作对象--><div id="app"&...原创 2020-03-04 17:31:01 · 1353 阅读 · 0 评论 -
vue使用shop修饰符阻止事件冒泡
使用shop在点击事件中阻止事件冒泡的上一层DOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><!--定义vue的操作对象--><div id="app"> <di...原创 2020-03-04 17:19:05 · 182 阅读 · 0 评论 -
vue下的定时器
每秒在控制台打印出一个字符串this.msg是在data中定义的值methods:{ //在此处定义实例可用的所有方法 lang(){ setInterval(()=>{ console.log(this.msg) //定时器中执行的代码 },1000) }}...原创 2020-03-04 15:35:00 · 64 阅读 · 0 评论 -
vue指令的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> [v-cloak]{ display: none; } </style></head>&l...原创 2020-03-04 15:16:24 · 122 阅读 · 1 评论 -
vue.js框架的导入
在线导入最新版本<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>下载vue.jshttps://vuejs.org/v2/guide/installation.html#Vue-Devtools下载后将vue.js文件放在项目对应目录中,根据项目路径自行导入<scrip...原创 2020-03-04 13:38:39 · 588 阅读 · 1 评论