vue.js_03_vue.js的样式和修饰符
1.vue.js的样式
<body>
<div id="app">
<h1 :style="styleObj1">这是一个h1</h1>
<h1 :style="{color:'red','font-weight':200}">1111111111</h1> <!--<h1 class="red active">这是一个h1</h1>-->
<!--第一种方式 传递一个数组 class需要使用 v-bind-->
<h1 :class="['red','thin']">这是一个h1</h1> <!--第二种方式可以使用 三元表达式-->
<h1 :class="['red','thin',flage?'active':'']">这是一个h1</h1> <!--第三种方式 使用一个对象 {key:value}来代替三元表达式-->
<h1 :class="['red','thin',{active:flage}]">这是一个h1</h1> <!--第四种方式直接使用对象来表示 对象的名字可带引号 也可以不带引号-->
<h1 :class="{red:true,thin:true}">这是一个h1</h1> </div>
<script>
var vm = new Vue({
el: '#app',
data: {
flage:true,
styleObj1:{color:'red','font-weight':200}，
},
methods: {}
})
</script>
</body>
2.vue.js的修饰符
<div id="app" class="inner" @click="divHandler">
<!--@click.stop 阻止事件的冒泡-->
<input type="button" value="点我 stop" @click.stop="btnStop" /> <!--@click.prevent 阻止默认行为的触发 不会跳转到百度首页-->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a> <!-- @click.capture 实现捕获触发事件的机制 由外到内的冒泡-->
<div class="inner" @click.capture="div2Handler">
<input type="button" value="点我 capture" @click="btnCapture" />
</div> <!-- @click.self 只能操作自己的事件时 才会触发自己的事件处理函数-->
<div class="inner" @click.self="div2Handler">
<input type="button" value="点我 capture" @click="btnCapture" />
</div> <!-- @click.once 只能触发一次事件-->
<a href="http://www.baidu.com" @click.once="linkClick">百度一下</a>
</div>
vue.js_03_vue.js的样式和修饰符的更多相关文章
- Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- Vue.js学习笔记之修饰符详解
本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...
- Vue学习笔记五：事件修饰符
目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Vue中v-model指令的常用修饰符
v-model指令有三个可以选用的修饰符:.lazy..number以及.trim.vue官方对此的描述为: .number-输入字符串转为有效的数字 .lazy-取代input监听change事件 ...
- Vue 事件的基本使用 && 事件修饰符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- vue学习 `${HH}-${mm}-${dd}` 按键修饰符
vue 有一种拼接字符串的规范写法 //键盘 Tab 键 上边的键 英文输入状态 然后采用类似EL表达式${变量}return `${}:${}:${}` //有时候我们经常在输入完密码之后,按回车E ...
随机推荐
- 关于Async与Await的FAQ
=============C#.Net 篇目录============== 环境:VS2012(尽管System.Threading.Tasks在.net4.0就引入,在.net4.5中为其增加了更丰 ...
- VS中检测数据库链接
在程序中链接数据库,总要为链接语句发愁.可以尝试在链接前,从VS中测试下链接,测试成功的话,可以直接将链接语句复制到程序中. 在VS中,选择“工具”——“连接到数据库”,如下:
- System.Web.Mvc.ControllerBase.cs
ylbtech-System.Web.Mvc.ControllerBase.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...
- SpringBoot--外部配置
常见的SpringBoot外部配置有常规属性配置.类型安全的配置.日志配置.Profile配置 一.常规属性配置 在spring中,注入properties中的配置值时,需要两步: 通过注解@Prop ...
- 动态调整Log4j日志级别
log4j2.xml配置文件中支持配置monitorInterval参数,检测到配置改变后重新加载,达到动态调整日志级别的效果. 故调整日志级别无须手动重启服务. log4j2.xml配置文件示意: ...
- DNA repair HDU - 2457 AC自动机+DP
题意: 给你N个模板串,并且给你一个文本串, 现在问你这个文本串最少需要改变几个字符才能使得它不包含任何模板串. (以上字符只由A,T,G,C构成) 题解: 刚开始做这一题的时候表示很懵逼,好像没有学 ...
- AbstractByteBuf 源码分析
主要成员变量 static final ResourceLeakDetector<ByteBuf> leakDetector = new ResourceLeakDetector<B ...
- Carthage使用
# carthage 包管理 ## 安装过程 1) 安装homebrew ``` ruby$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githu ...
- LINUX常用操作命令和命令行编辑快捷键
终端快捷键: Ctrl + a/Home 切换到命令行开始 Ctrl + e/End 切换到命令行末尾 Ctrl + l 清除屏幕内容,效果等同于clear Ctrl + u 清除剪切光标之前的内容 ...
- JS规则 我或你都可以 (逻辑或操作符）||逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”
我或你都可以 (逻辑或操作符) "||"逻辑或操作符,相当于生活中的"或者",当两个条件中有任一个条件满足,"逻辑或"的运算结果就为&quo ...