VUE
任书含 廊坊师范提高班 十五期
Eureka ^ 7
展开
-
VUE之class与style绑定
v-bind:class绑定类 对象语法: 数组语法: Data:{ activeClass:'active' errorClass:'text-danger' } 在组件上使用 Vue.component('my-component',{ Template:'hi' }) v-bind : style绑定内联样式 对象语法 Data:{ acitveColor:'red' Fontsize:30 } 数组语法 自动添加前缀 当 v-bind:style 使用需要添加浏览器引擎前缀的CSS原创 2021-02-28 11:26:50 · 256 阅读 · 4 评论 -
VUE路由-路由跳转
在进行具体的路由跳转之前我们要先做些基础准备 1.新建一个页面 <template lang ="html"> <div class="learnvue"> 学习路由使用 </div> </template> <script> export default{ } </script> <style lang="css"> </style> 2.在路由文件中新增原创 2020-10-26 11:45:30 · 330 阅读 · 3 评论 -
VUE路由配置初步学习
Vue路由两种安装方式 1.通过script标签 2.通过node.js npm install vue-router 值得注意的是如果在模块化的工程中通过npm的方式安装,则需要通过Vue.use()明确的安装路由功能 即在src文件夹下的main.js文件中 Import Vue from ‘vue’ Import VueRouter from ‘vue-router’ Vue.use(VueRouter) 3.创建路由 4.给出路由显示位置 5.将路由对象注入Vue实例中 router 以原创 2020-10-26 08:33:07 · 223 阅读 · 7 评论 -
VUE-列表渲染
v-for把一个数组对应为一组元素 通过v-for指令基于一个数组来渲染整个列表,在v-for指令中需要使用item in items形式的特殊语法,其中 items是元数据数组,item则代表别迭代数组的别名。 {{item.message}} Var example1 = new Vue({ El: ‘#example-1’ Data:{ Items:[ {message : 'Foo'}, {message: 'Bar} ] } } })原创 2020-09-30 10:33:23 · 232 阅读 · 6 评论 -
VUE-条件渲染
v-if指令用于条件性的渲染一块内容,只有指令表达式返回值为truthy时被渲染。 在template元素上使用v-if条件渲染分组 Title Paragraph 1 Paragraph 2 v-else v-else类似于if else 中的else块 Now you see me Now you don't v-else必须紧跟在 v-if 或者 v-else-if的元素后面。 v-else-if 类似于 elseif ,可以连续使用 A B C Not A/B原创 2020-09-30 10:29:09 · 270 阅读 · 4 评论