Vue指令系统的常用指令
0. 指令介绍1. 指令 (Directives) 是带有“v-”前缀的特殊属性。2. 每一个指令在vue中都有固定的作用。3. 在vue中,提供了很多指令,常用的有:v-html、v-if、v-model、v-for等等。1. 文本指令v-html和v-textv-text 相当于js代码的innerText,相当于我们上面说的模板语法,直接在html中插值了,插的就是文本.如果data里面写了
0. 指令介绍
1. 指令 (Directives) 是带有“v-”前缀的特殊属性。
2. 每一个指令在vue中都有固定的作用。
3. 在vue中,提供了很多指令,常用的有:v-html、v-if、v-model、v-for等等。
1. 文本指令v-html和v-text
v-text 相当于js代码的innerText,相当于我们上面说的模板语法,直接在html中插值了,插的就是文本.
如果data里面写了个标签,那么通过模板语法渲染的是文本内容,这个大家不陌生,这个v-text就是辅助我们使用模板语法的
1.1 v-html相当于innerHtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app" >
<!-- <h1>{{atag}}</h1> 和v-text指令系统做的是一样的-->
<h1 v-text="atag"></h1>
<h1 v-html="atag"></h1> <!-- 能过将标签字符串识别成标签效果 -->
<!-- <h1 v-text="num"></h1>-->
<!-- <h1 v-text="num+1"></h1>-->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
atag:'<a href="http://www.baidu.com">百度</a>',
num:20,
}
}
})
</script>
</html>
2. 条件渲染指令v-if和v-show
vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show。
2.1 v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app" >
<a href="" v-if="num>20">百度1</a>
<a href="" v-else-if="num<20">百度2</a>
<h1 v-else>京东</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
num:21,
}
}
// vm.num = 18; 我们发现当num的值被重新赋值时,vue的视图部分(html)
// 会自动发生变化,这就是数据驱动视图,以后视图的效果都是通过数据来控制的
// vm.num = 20;
})
</script>
</html>
2.2 v-show
标签元素:
<h1 v-show="ok">Hello!</h1>
data数据:
data:{
ok:false // true则是显示,false是隐藏
}
2.3 简单总结v-if和v-show
v-show后面不能跟v-else或者v-else-if
v-show隐藏元素时,使用的是display:none来隐藏的,而v-if是直接从HTML文档中移除元素[DOM操作中的remove]
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
2.4 操作属性v-bind
格式:
<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容,{{ }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app" >
<h1 v-bind:xx="xxattr">xxoo</h1> <!-- v-bind:动态的标签属性控制,简写 : -->
<h1 :xx="xxattr">xxoo</h1> <!-- v-bind:动态的标签属性控制,简写 : -->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
xxattr:'sss',
}
}
})
</script>
</html>
2.5 案例:
显示wifi密码效果:配合v-on事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<input :type="tt"> <button v-on:click="showp">{{msg}}</button>
<input :type="tt"> <button @click="showp">{{msg}}</button> <!-- v-on:事件名称简写@事件名称 -->
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
tt:'password',
msg:'显示密码',
}
},
methods:{
// showp:function (){
//
// }
showp(){ // 单体模式
if (this.tt === 'password'){
this.tt = 'text';
this.msg = '隐藏密码';
}else {
this.tt = 'password';
this.msg = '显示密码';
}
}
}
})
</script>
</html>
2.6 事件绑定v-on和methods属性
有两种事件操作的写法,@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
2.6.1 v-on控制数据属性的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<!-- <button @click="num++">+1</button> 直接操作数据属性 -->
<button @click="num=num+10">+10</button> <!-- 直接操作数据属性 -->
<h1>{{num}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
num:100,
}
},
methods:{
}
})
</script>
</html>
案例2:
完成商城的商品增加减少数量
步骤:
-
给vue对象添加操作数据的方法
-
在标签中使用指令调用操作数据的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<button @click="num++">+1</button>
<input type="text" :value="num">
<button @click="jian">-1</button> <!-- 一些复杂的数据处理还是通过方法来搞 -->
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
num:10,
}
},
methods:{
jian(){
if (this.num>0){
this.num--;
}
}
}
})
</script>
</html>
2.7 v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<input type="text" v-model="num">
<h1>{{num}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
num:10,
}
},
methods:{
jian(){
if (this.num>0){
this.num--;
}
}
}
})
</script>
</html>
2.8 操作样式
格式:
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组(数组的方式用的比较少)
data(){
return {
num:11,
xx:'c1',
}
}
示例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
color:red;
}
.c2{
color:green;
}
</style>
</head>
<body>
<div id="xx">
<p :class="xx">床前明月光</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
num:11,
xx:'c1',
}
},
methods:{
jian(){
if (this.num>0){
this.num--;
}
}
}
})
</script>
</html>
示例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
color:red;
}
.c2{
color:green;
}
</style>
</head>
<body>
<div id="xx">
<!-- <p>淫湿一手</p>-->
<!-- <p class="c1" :class="{c2:num<=10}">床前明月光</p>-->
<!-- <p :class="{c1:num>10,c2:num<=10}">床前明月光</p>-->
<!-- class类值控制语法: :class='{类值:判断条件(布尔值或者得到布尔值的算式),类值:判断条件....}'
布尔值或者得到布尔值的算式: 里面直接可以使用数据属性
-->
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
num:11,
xx:'c1',
}
},
methods:{
jian(){
if (this.num>0){
this.num--;
}
}
}
})
</script>
</html>
2.9 控制标签style样式
格式1:值是json对象,对象写在元素的:style属性中
标签元素:
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 注意:不能出现中横杠,有的话就套上'font-size',或者去掉横杠,后一个单词的首字母大写,比如fontSize -->
data数据如下:
data: {
activeColor: 'red',
fontSize: 30
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<div class="c1" :style="{color:c, backgroundColor:b}"> <!-- 注意:有-的css属性名称,要改为驼峰格式 -->
床前明月光,地上鞋三双.
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
c:'red',
b:'green'
}
},
methods:{
jian(){
if (this.num>0){
this.num--;
}
}
}
})
</script>
</html>
格式2:值是对象变量名,对象在data中进行声明
标签元素:
<div v-bind:style="styleObject"></div>
data数据如下:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<div class="c1" :style="divstyle"> <!-- 注意:有-的css属性名称,要改为驼峰格式 -->
床前明月光,地上鞋三双.
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#xx', // #xx css选择器
data(){
return {
c:'red',
b:'green',
divstyle:{
'color':'tan',
'backgroundColor':'blue',
}
}
},
methods:{
jian(){
if (this.num>0){
this.num--;
}
}
}
})
</script>
</html>
实例-vue版本选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span @click="num=1" :class="{current:num===1}">国内新闻</span>
<span @click="num=2" :class="{current:num===2}">国际新闻</span>
<span @click="num=3" :class="{current:num===3}">银河新闻</span>
<!--<span>{{num}}</span>-->
</div>
<div class="content">
<div class="list" :class="{active:num===1}">国内新闻列表</div>
<div class="list" :class="{active:num===2}">国际新闻列表</div>
<div class="list" :class="{active:num===3}">银河新闻列表</div>
</div>
</div>
<script>
// 思路:
// 当用户点击标题栏的按钮[span]时,显示对应索引下标的内容块[.list]
// 代码实现:
var card = new Vue({
el:"#card",
data:{
num:0,
},
});
</script>
</body>
</html>
3.0 列表渲染指令v-for
在vue中,可以通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象。
数据是数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,index) in hobby_list" :key="index">{{value}}--{{index}}</li>
<!-- value是数组中的元素,index是索引,注意v-for一定要写 :key -->
<!-- <li v-for="value, index in hobby_list">{{value}}</li>-->
</ul>
</div>
</body>
<script>
// 思路:
// 当用户点击标题栏的按钮[span]时,显示对应索引下标的内容块[.list]
// 代码实现:
var card = new Vue({
el:"#app",
data:{
num:0,
hobby_list:[
'抽烟',
'喝酒',
'烫头',
'烫头2',
]
},
});
</script>
</html>
数据是对象:
<ul>
<!--i是每一个value值-->
<li v-for="value in book">{{value}}</li>
</ul>
<ul>
<!--value是每一个value值,attr是每一个键名-->
<li v-for="(value,attr) in book">{{attr}}:{{value}}</li>
</ul>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book: {
// "attr属性名":"value属性值"
"id":11,
"title":"图书名称1",
"price":200
},
},
})
</script>
更多推荐
所有评论(0)