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

最新推荐文章于 2023-10-17 13:58:40 发布

文雅的

最新推荐文章于 2023-10-17 13:58:40 发布

阅读量279

点赞数

文章标签： vue css

本文链接：https://blog.csdn.net/weixin_47485418/article/details/109583410

版权

学习目标：

使用了 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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于vue 常用指令，以及动态添加样式，单选效果，多选效果样式实现，以及style，class的样式切换

学习目标：使用了 vue 的指令后，表达式是 JS 表达式，变量是 VUE 实例中的数据属性。学习内容：1 常用指令v-if指令v-show指令v-else指令v-for指令v-bind指令v-modelv-on指令v-text指令vue声明式渲染：采用模板语法来声明式的将数据渲染进Dom<div id="app"> <h1>{{msg}}<h1></div>new Vue({ el:"#app", data:{
复制链接

扫一扫