在Vue中使用样式
##使用class样式
一共四种方式在注释中有解释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种使用方式,直接传递一个数组,这里的class需要使用 v-bind 做数据绑定 -->
<!-- <h1 :class="['thin','italic']">这是一个很大很大的H1</h1> --> <!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="['thin', 'italic',flag?'avtive':'']">这是一个很大很大的H1</h1> --> <!-- 在数组中使用 对象 替代三元表达式,提高代码可读性 -->
<!-- <h1 :class="['thin', 'italic',{'avtive':flag}]">这是一个很大很大的H1</h1> --> <!-- 在为 class 使用 v-bind 绑定对象时,对象的属性是类名,由于 对象的属性可带引号,也可不带,所以这里没写引号,属性的值 是一个标识符 -->
<h1 :class="classObj">这是一个很大很大的H1</h1>
</div> <script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag:true,
classObj:{
red:true,
thin:true,
italic:false,
active:false
}
},
methods:{ }
})
</script>
</body>
</html>
##使用内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 对象就是无序键值对集合 -->
<h1 :style="styleObj1">这是一个H1</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleObj1:{
color:'red',
'font-weight':200
}
},
methods:{ }
})
</script>
</body>
</html>
##v-for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="user in list">{{ user.id }}---------{{ user.name }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'}
]
},
methods:{ }
})
</script>
</body>
</html>
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 注意:在遍历对象身上的键值对的时候,除了有val key ,在第三个位置还有索引 -->
<p v-for="(val,key) in user">{{ val }}------{{ key }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:{
id: 1,
name: 'Tony Stark',
gender:'男'
}
},
methods:{ }
})
</script>
</body>
</html>
对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- in后面我们放过 普通数组,对象数组,对象,还可以放数字 -->
<!-- 注意:如果使用v-for迭代数字,前面的count值从1开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{ }
})
</script>
</body>
</html>
迭代数字
2.2.0+的版本中,在组件里使用v-for时,key是必须的.
当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用"就地复用"策略,如果数据的顺序被改变,Vue将不是移动DOM元素来匹配数据的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过得每个元素
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key属性(string/number).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id"/>
</label>
<label>Name:
<input type="text" v-model="name"/>
</label>
<label>
<input type="button" value="添加" @click="add"/>
</label>
</div> <!-- 注意:v-for循环的时候key属性只能使用number或string -->
<!-- 注意:key在使用的时候必须使用 v-bind 属性绑定的形式指定key的值 -->
<!-- 在组件中使用v-for循环时或在一些特殊情况中,如果 v-for 有问题,必须 在使用v-for 的同时指定唯一的字符串/数字类型 :key值 -->
<p v-for="item in list" :key="item">
<input type="checkbox"/>{{ item.id }}---------{{ item.name }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[
{ id: 1,name:'李斯'},
{ id: 2,name:'嬴政'},
{ id: 3,name:'赵高'},
{ id: 4,name:'韩非'},
{ id: 5,name:'荀子'}
]
},
methods:{
add(){
this.list.unshift({id:this.id, name:this.name})
}
}
})
</script>
</body>
</html>
实例说明:
当第27行代码中无 :key="item"时,运行后界面如下:
假如先勾选第五个,然后添加id为6,name为项目的元素,点添加按钮后界面如下:
会发现在插入新元素后,勾选的仍是排序为第五个的元素,但是却不是我们希望勾选的id为5的元素.
现在我们在第27行代码中加入key,再试试添加新元素的效果.结果如下:
这就是为什么在使用v-for的时候后面必须加上key
##v-if和v-show的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="button" value="toggle" @click="toggle"/> -->
<input type="button" value="toggle" @click="flag=!flag"/>
<!-- v-if 的特点是每次都会重新删除或创建元素,有较高的切换性能消耗-->
<!-- v-show 的特点是不会重新进行dom的删除和创建操作,只是切换了元素的 display:none 样式 ,有较高的初始渲染消耗--> <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if ,推荐使用v-show-->
<!-- 如果元素可能永远也不会被显示给用户看到,则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag : true
},
methods:{
// toggle(){
// this.flag = !this.flag
// }
}
})
</script>
</body>
</html>
在Vue中使用样式的更多相关文章
- Vue学习笔记七：Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- vue.js（7）--vue中的样式绑定
vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 深入理解 vue 中 scoped 样式作用域的规则
哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...
- vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- vue中的样式
一.使用class样式: CSS部分: <style> .green{ color:green; } .italic{ font-style:italic; } .thin{ ; } .a ...
- vue中的样式绑定
样式绑定 样式绑定有class绑定和style绑定,这里我们分别说说 class绑定 class样式绑定与有两种语法:对象语法(v-bind:class='{active:isActive}').数组 ...
- vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？
我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...
随机推荐
- Spark2.2 saveAsTable 函数使用 overWrite 设置 Partition 会造成全覆盖的问题
在使用 CDH 6.0.X 的版本还是自带的是 Spark2.2 的版本,2.2 版本的 Spark 使用 saveAsTable 如果使用overWrite PartitionBy 的功能会有和 h ...
- Lazy 延迟加载
问题:最近遇到一个项目遇到一个问题(很久的项目,现阶段主要维护),程序初始化的时候比较慢,最后查原因的时候发现是因为一个类的构造方法里面有些逻辑, 解决办法:希望在使用的时候再进行加载,最后想到了延迟 ...
- Java中的Null是什么？
对于Java程序员来说,null是令人头痛的东西.时常会受到空指针异常(NPE)的骚扰.连Java的发明者都承认这是他的一项巨大失误.Java为什么要保留null呢?null出现有一段时间了,并且我认 ...
- python 三元运算符、推导式、递归、匿名函数、内置函数
三目运算符 # 三目(元)运算符:就是 if...else...语法糖 # 前提:简化if...else...结构,且两个分支有且只有一条语句 # 注:三元运算符的结果不一定要与条件直接性关系 cmd ...
- poj 3694（割边+lca）
题意:给你一个无向图,可能有重边,有q次询问,问你每次我添加一条边,添加后这个图还有多少个桥 解题思路:首先先把所有没有割边的点对缩成一个联通块,无向图一般并查集判环,然后就得到一个割边树,给你一条新 ...
- ubuntu下python跑任务输出到文件中遇到的一些问题（输出重定向）
之前主要是参考https://www.cnblogs.com/chason95/articles/9760291.html 一般使用 python test.py > ./log.txt 或 p ...
- GIt帮助文档之忽略某些文件——忽略python虚拟环境文件夹（转）
前言:为避免多个Python项目下安装库之间的冲突,或为轻松打包某个项目,建议在每个项目文件夹下安装Python虚拟环境,并在虚拟环境内进行操作,之后你安装的任何库和执行的任何程序都是在这个环境下运行 ...
- Nginx Http 过滤模块
L69 执行顺序在content阶段后 log阶段前调用的 也就是处理完用户业务后 准备记录处理日志之前 我们可以到nginx http_model.c里查看 数组 执行顺序从下至上顺序执行 copy ...
- 论Scrapy中的数据持久化
引入 Scrapy的数据持久化,主要包括存储到数据库.文件以及内置数据存储. 那我们今天就来讲讲如何把Scrapy中的数据存储到数据库和文件当中. 终端指令存储 保证爬虫文件的parse方法中有可迭代 ...
- 记录下扣jio的2018年
踩着18年的尾巴,写下这篇总结,既给18年画上句号,也展望19年,制定下计划. 自17年底正式接手团队项目管理工作以来,虽然前面一年都干了大部分工作,但正式走到这个位置上来,还是有一部分的期待.接手之 ...