Vue：v-on、v-bind、v-model、v-text、v-html用法

2021-01-26 11:12

阅读：420

标签：指令 method on() 覆盖 check 调用 methods 创建数据绑定

1、v-on：用于绑定HTML事件

v-on，用于事件（如click）的监听绑定，比如下图，意思是，为当前button绑定监听器，点击则调用sendBack1方法；v-on也可简写为@
示例：例如我们在HTML的body中加入一个绑定了事件的button

在js的methods中加入一个onClick事件：

2、v-bind：用于设置HTML属性


  
  百度
  
  百度

在js的data中赋值url：

3、v-model：在表单控件元素上创建双向数据绑定


  jack
  John
  Mike
  
Checked names:{{checkedNames}}

在js的data中赋值checkedNames：

4、v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，只显示文本不显示标签


    
    	{{msg1}}

5、v-html同样是用来显示data中属性的属性值的（数据绑定），此指令不仅可以显示文本内容，还可以显示带标签的内容


    
    	{{msg1}}

Vue：v-on、v-bind、v-model、v-text、v-html用法

标签：指令 method on() 覆盖 check 调用 methods 创建数据绑定

原文地址：https://www.cnblogs.com/hghua/p/13232137.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Vue：v-on、v-bind、v-model、v-text、v-html用法
文章链接：http://soscw.com/index.php/essay/47237.html

亲，登录后才可以留言！