<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>vue--样式绑定 事件处理</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

</head>
<style>

.active {
width: 100px;
height: 100px;
background: green;
border:1px solid black;
}
.text-danger {
background: red;
}
.base {
width: 100px;
height: 100px;
}
</style>
<body>
<div id="app">
<!--事件绑定-->
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
<!--样式绑定-->
<div v-bind:class="{active:isActive,'text-danger': hasError}"></div>
<div v-bind:class="classsObject"></div>
<!--使用对象-->
<div v-bind:class="classObject"></div>
<!--数组语法-->
<div v-bind:class="[activeClass, errorClass]"></div>
<!--三元表达式来切换列表中的 class ：-->
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
<!-- v-bind:style 直接设置样式：-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
<!--使用对象-->
<div v-bind:style="styleObject">菜鸟教程</div>
<!--数组语法-->
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<div id="greet">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
</div>
</body>
<script>
var app = new Vue({
el: '#greet',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
say: function (message) {
alert(message)
},
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
console.log(event)
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
<script>

new Vue({
el:'#app',
data:{
counter:0,
activeColor:'green',
fontSize:30,
isActive:true,
hasError:true,
activeClass: 'active',
errorClass: 'text-danger',
name: 'Vue.js',
error: {
value: true,
type: 'fatal'
},
classsObject:{
active:true,
'text-danger':true
},
styleObject:{
color:'red',
fontSize:'30px'
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
</script>
</html>

vue-----样式绑定 事件处理的更多相关文章

  1. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  2. Vue 样式绑定 && 条件渲染

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

  3. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  4. Vue样式绑定、事件绑定

    1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...

  5. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  6. vue样式绑定

    vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象 ...

  7. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  8. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  9. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  10. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

随机推荐

  1. css 技巧 （持续更新）

    1.滚动条样式   /*自定义滚动条-----隐藏型*/ .scroll::-webkit-scrollbar-track{ border-radius: 1px;   }   .scroll::-w ...

  2. windwos安装docker步骤

    参考 https://www.linuxidc.com/Linux/2016-07/133506.htm

  3. [Oracle][RMAN]关于Oracle RMAN里面的Merged Incremental Backups的Tag分离机能

    关于Oracle RMAN里面的Merged Incremental Backups的机能,RMAN使用的比较多的DBA们可能会有所了解. 基本上,每次都实行同样的Backup命令即可完成BACK. ...

  4. anytime

    #include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<sys/time.h> ...

  5. day13笔记

    1:StringBuffer(掌握) (1)用字符串做拼接,比较耗时并且也耗内存,而这种拼接操作又是比较常见的,为了解决这个问题,Java就提供了 一个字符串缓冲区类.StringBuffer供我们使 ...

  6. Mysql 存储过程查询结果赋值到变量的方法

    drop table if exists test_tbl; create table test_tbl (name varchar(20), status int(2)); insert into ...

  7. Beta冲刺四

    1.团队TSP 团队任务 预估时间 实际时间 完成日期 对数据库的最终完善 120 150 12.2 对学生注册功能的完善--新增触发器 150 140 11.29 对教师注册功能的完善 150 13 ...

  8. 2018-2019-2 20175224 实验一《Java开发环境的熟悉》实验报告

    实验报告封面 实验内容与步骤 Java开发环境的熟悉-1 1.建立“自己学号exp1”的目录 2.在“自己学号exp1”目录下建立src,bin等目录 3.javac.java的执行在“自己学号exp ...

  9. Sublime使用及配置C编译器

    一.环境配置 在安装了MinGW+Gcc的基础上做如下设置—— 新建编译系统c.sublime-build: { "cmd" : ["gcc", "$ ...

  10. 普天同庆，微博开通，从今以后，努力用功！ 狗屎一样的顺口溜！Q狗屎！！狗屎。。。。。 测试。。测试。。。没刷过微博。屯里来的。看看啥效果

    普天同庆,微博开通,从今以后,努力用功! 狗屎一样的顺口溜!Q狗屎!!狗屎..... 测试..测试...没刷过微博.屯里来的.看看啥效果