<!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. Vue学习Day002

    内联处理器的操作 除了直接绑定到一个方法,也可以在内联JavaScript语句中调用方法 <div id="example-3"> <button v-on:cl ...

  2. 《推荐》安装Photoshop详细步骤 ，手把手，一步一步，具体详细地教你安装Photoshop （Adobe photoshop CS6）

    现在的大学生必备技能,除了单反拍照,就是PS (Photoshop)了.可以说PS是一个强大的图片编辑处理软件,也是目前公认的最好的通用平面美术设计软件,它的功能完善,性能稳定,使用也很方便.几乎在所 ...

  3. SQL-55 分页查询employees表，每5行一页，返回第2页的数据

    题目描述 分页查询employees表,每5行一页,返回第2页的数据CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` d ...

  4. L1-037 A除以B （10 分）

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805094485180416   真的是简单题哈 —— 给定两个 ...

  5. struts2的文件配置以及注释代码

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-/ ...

  6. JDBC学习DayTwo

    一.利用反射及JDBC元数据编写通用的查询方法 1.ResultSetMetaData 定义:描述ResultSet的元数据对象,即从中可以获取到结果集中有多少列.列名是什么. 获取 ResultSe ...

  7. 通过Mybatis原始Dao来实现curd操作

    环境的配置见我上一篇博客. 首先,在上一篇博客中,我们知道,SqlSession中封装了对数据库的curd操作,通过sqlSessionFactory可以创建SqlSession,而SqlSessio ...

  8. Java复数的加乘除运算

    //主要是对零的处理,有什么不对的地方欢迎批评指正,一起进步class complex{ double a,b; public String toString() { return("实部: ...

  9. 洛谷水题p1421小玉买文具题解

    题目描述 班主任给小玉一个任务,到文具店里买尽量多的签字笔.已知一只签字笔的价格是1元9角,而班主任给小玉的钱是a元b角,小玉想知道,她最多能买多少只签字笔呢. 输入输出格式 输入格式: 输入的数据, ...

  10. 为什么想起开通blog?

    为什么想起开通博客 2016年跨年夜写年终总结时,曾对自己许下愿,要成为一个会讲“故事”的人,无奈口才不行,写字也不好看,所以只能在电脑上码码字代替了. 在我看来,这“故事”该有许多种含义:首先,电子 ...