vue中动态指令的用法和event事件 csgo动态准星指令

bigegpt 2024-10-11 10:55 23 浏览

html：

<div id="app">
		<!-- <p v-if="age>18">age大于18 - {{age}}</p>
		<p v-else-if="age<18 && age>16">age小于18 -{{age}}</p>
		<p v-else="age<15">age小于15 </p>
		<p v-if="flag ? age=30 : age=16">{{age}}</p> -->
		<button @click="age ++ ">按钮+ {{age}}</button>

		<!-- <p v-bind:class=" 'c' ">颜色</p> 这里的c相当于是一个字符串--> 
		<!-- <p v-bind:class="c">颜色</p> 这里的c相当于是一个变量，需要在js中指定一下 -->
		<!-- <p v-bind:class=" ['c','bor'] ">颜色+边框</p> 如果不想要引号，就需要去js中指定一下-->

		<!-- <div v-bind:class="{ 'bor' : flag }">边框</div> 后面是判断条件，当满足的时候，再加上bor这个类 -->
		<!-- <p v-bind:class="fun()">函数</p> 也可以写函数 -->

		<!-- style 判断条件与class相同-->
		<!-- <div v-bind:style="{color:'red',fontSize:'30px',marginTop:'30px'}"> style样式</div> 样式名是驼峰命名的，并且没有中横线 -->
		<!-- <div :style="sty">111</div> -->
		<!-- <div :style="[sty,sty2]">222</div> -->

		<!-- {{}} 浏览器闪烁问题 需要配置下v-cloak的css样式 -->	
		<h1 v-cloak>{{msg}}</h1>

		<a @click="action($event)">阻止事件冒泡</a>
		<a href="http://www.baidu.com" @click.prevent.stop="action2()">自带阻止默认行为 && 事件冒泡</a>
	</div>

css：

<style>
.c{ color: pink }
.bor{border:1px solid #ccc;}
[v-cloak]{ display: none; } /*必须配置css样式，否则不成效*/
</style>

js：

<script>
new Vue({
	el:'#app',
	data:{
		age:14,
		flag:true,
		c:'c',
		sty:{background:'red'},
		sty2:{color:'pink'},
		msg:'文本'
	},
	methods:{
		fun:function(){
			return 'c';
		},
		action:function(e){
			e.stopPropagation();
		}
	}
})
</script>

vue阻止冒泡

上一篇：vue-这应该是最基础了吧 vue v-
下一篇：Vue 开发必须知道的 36 个技巧「近1W字」

vue中动态指令的用法和event事件 csgo动态准星指令

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解