Vue指令之`v-bind`的三种用法及v-on事件指令
v-bind：是 Vue中，提供的用于绑定属性的指令
1. 直接使用指令`v-bind`
2. 使用简化指令`:`
3. 在绑定的时候，拼接绑定内容：`:title="btnTitle + ', 这是追加的内容'"`
4.v-bind 中，可以写合法的JS表达式
<input type="button" value="按钮" v-bind:title="mytitle + '123'"> <script src="./lib/vue-2.4.0.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
})
v-on: 事件绑定机制，可以简写@
<input type="button" value="按钮" @click="show"> <script src="./lib/vue-2.4.0.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
})
v-on也可以绑定的事件也可以传递参数的
<body>
<div class="box">
<input type="button" value="点击" v-on:click="alterhandle('杜伟')">
</div> <script>
var vm=new new Vue({
el:'.box',
data:{ },
methods: {
alterhandle:(ars)=>{
alert("欢迎您"+ars)
}
}
}
) </script>
Vue指令之`v-bind`的三种用法及v-on事件指令的更多相关文章
- using 的三种用法
using 有哪三种用法? 1)引入命名空间. 2)给命名空间或者类型起别名. 3)划定作用域.自动释放资源,使用该方法的类型必须实现了 System.IDisposable接口,当对象脱离作用域之后 ...
- Js闭包常见三种用法
Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...
- .NET(c#)new关键字的三种用法
前几天去家公司面试,有一道这样的题:写出c#中new关键字的三种用法,思前想后挖空心思也只想出了两种用法,回来查了下msdn,还真是有第三种用法:用于在泛型声明中约束可能用作类型参数的参数的类型,这是 ...
- SQL、LINQ、Lambda 三种用法(转)
SQL.LINQ.Lambda 三种用法颜色注释: SQL LinqToSql Lambda QA1. 查询Student表中的所有记录的Sname.Ssex和Class列.select sname, ...
- c# new关键字的三种用法
三种用法如下: 在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数. 2)new 修饰符:在用作修饰符时,new 关键字可以显式隐藏从基类继承的成 ...
- java中 this 的三种用法
Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...
- 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。
子查询存在的意义是解决多表查询带来的性能问题. 子查询返回单行多列: ANY三种用法: ALL两种用法: HAVING中的子查询返回单行单列: SELECT中使用子查询:(了解就好,避免使用这种方法! ...
- java中 this 关键字的三种用法
Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...
- C++学习---- virtual的三种用法
virtual用法一:多态 #include<iostream> using namespace std; class A{ public: virtual void display(){ ...
- c# new三种用法
前几天去家公司面试,有一道这样的题:写出c#中new关键字的三种用法,思前想后挖空心思也只想出了两种用法,回来查了下msdn,还真是有第三种用法:用于在泛型声明中约束可能用作类型参数的参数的类型,这是 ...
随机推荐
- cJSON笔记
github地址: https://github.com/DaveGamble/cJSON 需要将cJSON.h 和 cJSON.c拷贝到路径下,并且连接所需库文件 -lm 步骤:1.先将普通的jso ...
- 【Java】分布式自增ID算法---雪花算法 (snowflake，Java版)
一般情况,实现全局唯一ID,有三种方案,分别是通过中间件方式.UUID.雪花算法. 方案一,通过中间件方式,可以是把数据库或者redis缓存作为媒介,从中间件获取ID.这种呢,优点是可以体现全局的递增 ...
- Swift4.0复习扩展
1.扩展计算式属性: 2.对方法进行扩展: /// 定义枚举类型Light, /// 它指定了基本类型String enum Light: String { case red = "red& ...
- IE6/IE7/IE8 JQuery下resize事件执行多次的解决方法
在使用jQuery的resize事件时发现每次改变浏览器的窗口大小时resize时间会执行两次,百度搜索了一下找到一个解决的方法,使用setTimeout来解决这个问题代码如下: var resize ...
- 内存运行PE文件
内存中运行文件 拿exe并在HxD或010中打开 - cntrl+a copy as C 粘贴到encrypt.cpp 编译并运行encrypt.cpp - 创建shellcode.txt 从shel ...
- CF1277D Let's Play the Words?
思路: 字符串其实只有0...0, 0...1, 1...0, 1...1四种. 实现: #include <bits/stdc++.h> using namespace std; ]; ...
- （简单实用）Android支付宝商家收款语音播报
支付宝商家收款时,语音提示:支付宝收款xxx元,当时觉得这东西还挺有趣的,第一时间通知给商家,减少不必要的纠纷,节约时间成本,对商家对用户都挺好的. 在商家版有这样收款播报的功能,我觉得挺好的. 对列 ...
- 问题（一）升级Appium最新遇到滑动的坑
Appium的JAVA客户端更新到java-client 6.0.0-BETA3后,发现其中有关于界面滑动(swipe TouchAction)方面的升级(也有可能在之前的版本已经更新过类似的内容,没 ...
- idea导入eclipse包乱码问题全局解决方案：
IJ导入eclipse包乱码问题: 全局解决方案: 设置所在文件夹位置 1.从eclipse导入方式,发现还是乱码 2.导航栏点击文件->设置->editor->文件编码 将所在文件 ...
- NumPy使用图解教程
NumPy是Python中用于数据分析.机器学习.科学计算的重要软件包.它极大地简化了向量和矩阵的操作及处理.python的不少数据处理软件包依赖于NumPy作为其基础架构的核心部分(例如scikit ...