关于vue 常用指令,以及动态添加样式,单选效果,多选效果样式实现,以及style,class的样式切换

学习目标:

使用了 vue 的指令后,表达式是 JS 表达式,变量是 VUE 实例中的数据属性。


学习内容:

1 常用指令

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-model
v-on指令
v-text指令


vue声明式渲染:
采用模板语法来声明式的将数据渲染进Dom

<div id="app">
	<h1>{{msg}}<h1>
</div>
new Vue({
	el:"#app",
	data:{
		msg:"hello Vue",
	}
});
//渲染结果会将h1中的文本渲染成hello Vue

v-if指令:用于判断

<div id="app">
	<h1 v-if="flag"></h1>
</div>
new Vue({
	el:"#app",
	data:{
		flag:true,
	}
});
//如果flag为true,h1才会显示,否则将隐藏

注意:v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

.v-else指令:和v-if指令搭配使用,没有对应的值。当v-if的值false,v-else才会被渲染出来

<div id="app">
	<h1 v-if="show1">show1</h1>
	<h1 v-else="show2">show2</h1>
</div>
new Vue({
	el:"#app",
	data:{
		show1:false,
	}
});

v-show
​ 根据表达式的值来确定元素的display值,从而达到元素的显示和隐藏。

<div id="app">
	<p v-show="show1">显示</p>
	<p v-show="show2">隐藏</p>
</div>
new Vue({
	el:"#app",
	data:{
		//数据
		show1:true,
		show2:false,
	},
	methods:{}
});

注:v-show和v-if的区别:如果需要频繁切换显示/隐藏的可以用v-show;如果运行后不太可能需要切换显示/隐藏的可以用v-if;

v-for指令:用于循环遍历渲染数据 ,它和JavaScript的遍历语法相似

<div id="app">
	<ul>
		<li v-for="item in res">{{item.name}}</li>
	</ul>
</div>
new Vue({
	el:"#app",
	data:{
		res:[
			{name:"zhangsan"},
			{name:"lisi"},
			{name:"wangwu"}
		]
	}
});

v-bind指令(简写为“:”):用于给标签设置属性

//基本用法
<div id="#app">
	<p v-bind:id="id"></p>
</div>
//此时p标签的id名就为myid

//多类名用法

<div id="#app">
	<p v-bind:class="[class1,class2]"></p>
</div>
//此时p标签的类名就为c1 c2

v-model 指令:表单输入和应用状态之间的双向绑定(理解:牵一发而动全身

<div id="app">
	<input type="text" v-model="inpData">
	<p>{{inpData}}</p>
</div>
new Vue({
	el:"#app",
	data:{
		inpData:"hello vue",
	}
});
//此时在文本框中编辑内容,p标签中的内容会随之改变

v-on 指令(可简写为“@”):添加一个事件监听器

<div id="app">
	<button v-on:click="alert">v-on指令</button>
</div>
new Vue({
	el:"#app",
	data:{
		//数据
	},
	methods:{
		alert:function(){
			console.log("hello vue");
		}
	}
});
//点击button后触发点击事件,控制台输出hello vue

v-text指令:用于更新标签包含的文本,它的作用跟双大括号效果是一样的。

//两种方法效果相同
<div id="app">
	<p v-text="name"></p>
	<p>{{name}}</P>
</div>
new Vue({
	el:"#app",
	data:{
		//数据
		name:"hello vue",
	},
	methods:{}
});

v-html指令:绑定一些包含html代码的数据在视图上,例如Daisy,这个字符包含了标签,要想不被当做普通的字符串渲染出来,发挥应有的效果,我们就得使用v-html指令 。例如下面的写法,name里面的Daisy外层套上,用v-html指令后的功能效果就会正常被渲染出来,从而不会当做字符串被解析出来。

<div id="app">
	<p v-html="name"></p>
	<p>{{name}}</P>
</div>
new Vue({
	el:"#app",
	data:{
		//数据
		name:"<strong>Vue</strong>",
	},
	methods:{}
});

动态添加样式

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
<body>
  <div id='app'>
  	//1.直接在元素上通过:style的形式,书写样式对象
    <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
 	//2.将样式对象定义在data中,并直接引用到:style中
	//在data上定义样式
    <h1 :style="styleObj1">这是一个H1</h1>
 	//3.在:style中通过数组,引用多个data上的样式对象
	//在data上定义样式
    <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
 
  </div>
</body>
<script src="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
      styleObj2:{'font-style':'italic'},
    }
  });
</script>
</html>
 

多选

css样式如下

<style type="text/css">
body{margin:0;}
.box{ margin:150px 150px;}
ul{
	padding:0; 
	list-style:none;
}
li{
	width:50px; height:30px; display:inline-block;
	text-align:center; line-height:30px;
	cursor:pointer;margin-left:5px;
}
li:before{ 
	display:inline-block; width:10px; height:10px; 
	line-height:10px; content:""; border:1px #000 solid; 
	margin-right:2px; transition:all 0.3s linear;
}	
li.checked:before{ 
	background-color:#0CF; 
	border:1px #fff solid;
}
li.checked{color:#0CF;}
</style>

DOM文档中结构如下:

<ul class="box">
    <li v-for="c,index of cities"
    :class="{checked:c.bOn}"
    @click="checkbox(index)">{{c.city}}</li>
</ul>

JavaScript样式如下:

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : [{city:"北京",bOn:false},
		{city:"上海",bOn:false},
		{city:"重庆",bOn:false},
		{city:"广州",bOn:false},
		{city:"西安",bOn:false}]
	},
	methods : {
		checkbox(i){
			this.cities[i].bOn = !this.cities[i].bOn;
		}
	}
})

单选

//CSS样式如下:

<style type="text/css">
body{margin:0;}
ul{
	padding:0; list-style:none; 
	margin:150px 150px;
}
li{
	width:80px; height:50px; 
	display:inline-block;
	border-radius:8px; border:1px #000 solid;
	text-align:center; line-height:50px;
	cursor:pointer; 
	transition:all 0.3s linear;
	margin-left:5px;
}
li:hover{
	background-color:#0CF; color:#fff; 
	border:1px #fff solid;
}	
li.checked{
	background-color:#0CF; color:#fff; 
	border:1px #fff solid;
}
</style>

//DOM文档中结构如下:

<ul class="box">
	<li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>
</ul>

//JavaScript样式如下:

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : ["上海","北京","广州","重庆","西安"],
		n : 0
	},
	methods :{
		changeList(index){
			this.n = index;//this指向app
		}
	}
})
</script>

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值