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的样式和修饰符的更多相关文章

  1. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  2. Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  3. Vue学习笔记五：事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  4. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. Vue中v-model指令的常用修饰符

    v-model指令有三个可以选用的修饰符:.lazy..number以及.trim.vue官方对此的描述为: .number-输入字符串转为有效的数字 .lazy-取代input监听change事件 ...

  7. Vue 事件的基本使用 && 事件修饰符

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  8. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  9. vue学习 `${HH}-${mm}-${dd}` 按键修饰符

    vue 有一种拼接字符串的规范写法 //键盘 Tab 键 上边的键 英文输入状态 然后采用类似EL表达式${变量}return `${}:${}:${}` //有时候我们经常在输入完密码之后,按回车E ...

随机推荐

  1. Javascript加载talbe(包含分页、数据下载功能)

    效果图如下: 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或 ...

  2. js--判断当前环境是否为微信环境

    /** * 判断是否是微信环境 */ function getIsWxClient () { var ua = navigator.userAgent.toLowerCase(); if (ua.ma ...

  3. 2019 CCPC 湖南全国邀请赛

    A. Chessboard 做法1 单纯形. 做法2 最大费用可行流问题,行列模型. 对每行建一个点,每列建一个点.物品 \(i\) 在 \((r,c)\),那么 \(r\) 向 \(c\) 连流量为 ...

  4. Dubbo + Kryo 实现高速序列化

    Dubbo 中的序列化 Dubbo RPC 是 Dubbo 体系中最核心的一种高性能.高吞吐量的远程调用方式,可以称之为多路复用的 TCP 长连接调用: 长连接:避免了每次调用新建 TCP 连接,提高 ...

  5. JS流程控制语句 来来回回(Do...while循环) 先执行后判断 do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。

    来来回回(Do...while循环) do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次.因为它是先执行代码,后判断条件,如果条件为真,继续循环. do...w ...

  6. 74CMS漏洞打包(从老博客转)

    引子 这套CMS是上个月中做的审计,总共找到几个后台漏洞,可后台getshell,一个逻辑漏洞可任意发短信,还有一个前台注入漏洞.不过发到了某平台上之后,审核又要求我提交利用的poc,所以懒得发去了, ...

  7. 回首2018 | 分析型数据库AnalyticDB: 不忘初心 砥砺前行

    题记 分析型数据库AnalyticDB(下文简称ADB),是阿里巴巴自主研发.唯一经过超大规模以及核心业务验证的PB级实时数据仓库.截止目前,现有外部支撑客户既包括传统的大中型企业和政府机构,也包括众 ...

  8. 0907NOIP模拟测试赛后总结

    120分rank26.我又被打回原型了…… 下午考的.中午由于种种原因并没有睡好.于是状态很差. 第一眼看题感觉T1是一道XX题.部分分竟然给这么肥 然后看T2.T3好像都还不是特别恶心的题目,挺常规 ...

  9. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  10. python的meshgrid用法和3D库 mpl_toolkits.mplot3d 与PolynomialFeatures多项式库学习

    meshgrid import numpy as np from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Ax ...