Vue---v-bind、v-on、this语法

最新推荐文章于 2023-03-08 19:34:38 发布

手写的从前98

最新推荐文章于 2023-03-08 19:34:38 发布

阅读量957

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/GaoXiR/article/details/103708687

版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨了Vue.js中的核心指令v-bind和v-on的使用方法，解释了如何利用它们进行属性绑定和事件监听，同时介绍了如何在Vue组件中正确使用this关键字来访问data和methods。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、v-bind: 是Vue中提供用于绑定属性的指令，" v-bind: " 指令可以被简写为 " : "，其中用 “v-bind:” 绑定的属性中的值为data函数中的属性名，这个属性名可以理解为变量，在绑定的html属性中其还可以添加合法的Js表达式。
用法如下：

 <input type="button" value="按钮" v-bind:title="msg+ '123'">
 <input type="button" value="按钮" :title="msg+ '123'">
 以上两种方式均可

2、v-on: 事件绑定属性，通常与click配合使用，" v-on "可简写为 " @ "

<input type="button" value="按钮2" v-bind:title="mytitle" v-on:click="show">

3、this: 在函数中，如果想要获取data上的数据，或者想要调用method中的方法，必须通过this.数据属性名或 this.方法名来进行访问。

lang: function(){

方式一:
var _this = this;
setInterval(function(){
console.log(this.msg);
//获取到头的第一个字符
var start = _this.msg.substring(0,1);
//获取到 后面的所有字符
var end = _this.msg.substring(1);
//重新拼接得到新的字符串，并赋值给 this.msg
_this.msg = end + start;
 },400)
方式二:
setInterval( () =>{
console.log(this.msg);"
//获取到头的第一个字符
var start = this.msg.substring(0,1);
//获取到 后面的所有字符
var end = this.msg.substring(1);
//重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start;
},400)
}