v-model.title和v-model.capitalize有啥区别？

最新推荐文章于 2024-05-29 16:14:11 发布
最新推荐文章于 2024-05-29 16:14:11 发布
阅读量254 收藏
点赞数
分类专栏： JavaScript vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/123090142
版权
vue 同时被 2 个专栏收录
722 篇文章 4 订阅
订阅专栏
JavaScript
628 篇文章 6 订阅
订阅专栏 
<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.title="bookTitle"></my-component>
   {{ bookTitle }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
     return {
         bookTitle: ''
       }
  },
    });
    app.component('my-component', {
  props: {
   modelValue: String,
   modelModifiers: {
             default: () => ({})
             }
  },
  
  emits: ['update:modelValue'],
  template: `
    <input
      type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
      `,
      created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
   }).mount('#v-model-example')
</script>

区别

<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.capitalize="bookTitle"></my-component>
   {{ bookTitle }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
     return {
         bookTitle: ''
       }
  },
    });
    app.component('my-component', {
  props: {
   modelValue: String,
   modelModifiers: {
             default: () => ({})
             }
  },
  
  emits: ['update:modelValue'],
  template: `
    <input
      type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
      `,
      created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
   }).mount('#v-model-example')
</script>
hamimelon2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
commons-lang3-3.12.0-bin.tar.gz
04-17
Apache Commons Lang 是一个Java工具包，它提供了对Java语言核心类库的扩展，以支持一些高级功能和实用方法。在给定的压缩包文件"commons-lang3-3.12.0-bin.tar.gz"中，我们可以找到Apache Commons Lang 3.12.0版本...
vue2 v-model/v-text 中使用过滤器的方法示例
12-29
Vue.js 允许自定义过滤器，一般可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ ...
Vue3的v-model
一个努力不被优化的程序员
01-29 2734
此外，Vue 3 中的 v-model 还可以自定义修饰符。修饰符是一种特殊标记，可以在 v-model 绑定上使用，以更改其行为。例如，你可以使用 .lazy 修饰符来实现延迟更新，从而仅在用户完成输入后才更新绑定的值。另一个变化是，在 Vue 3 中，v-model 生成的属性和事件名称可以通过 setup() 函数中的 `v-model` 选项进行自定义。这意味着你可以使用不同的名称来指定生成的属性和事件，以适应不同的使用场景。
vue组件的v-model
weixin_47450807的博客
02-10 1万+
一、正常使用的v-model 使用对input标签使用v-model，如上图所所示，可以将其拆分成两部分，一个是数据绑定，另一个是监听事件。 二、对组件使用v-model 如图所示，在给组件使用v-model的时候，其实相当于将绑定的值update:model-value通过props传递给组件。并且在该组件上监听一个名为update:model-value，在组件中通过this.$emit触发事件，并且可以将要修改的值，传递过去。 也可以将其写成如下所示 如上图所示，当我们在home组件中使用v-
Vue 3 中的 emit(‘update:modelValue‘)：更灵活的双向绑定
最新发布
gaotlantis的博客
05-29 412
通过介绍 Vue 3 中的。
v-model指令运用
qq_44788119的博客
01-20 184
v-model的应用 1：复选框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style> body{ background-
（原创）vue中v-model的高级用法（多用于组件封装）
weixin_44314609的博客
02-20 1720
v-model
Vue组件中的v-model（深入解析）
nibabaoo的博客
04-02 2243
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
sqlup-mode.el：用于大写SQL关键字和函数的emacs次要模式
02-05
总的来说，`sqlup-mode.el`是Emacs用户提升SQL编程效率和代码质量的一个实用工具，尤其对于需要频繁编写和修改SQL的开发者来说，它可以极大地减少手动调整大小写的繁琐工作，从而专注于更重要的逻辑和业务处理。...
python中capitalize函数_pythoncapitalize-54.pdf
03-14
Python 中的字符串处理是编程中非常重要的一部分，Python 提供了多种字符串处理函数，包括 capitalize()、upper()、lower()、title() 等，以下是对这些函数的详细介绍： 1. capitalize() 函数：capitalize() 函数将...
commons-lang3-3.1-bin.tar.gz
03-21
4. **日期和时间**：DateUtils和DateFormatUtils提供了对日期和时间的处理，可以方便地进行日期格式化和解析。例如，`DateFormatUtils.format(date, "yyyy-MM-dd HH:mm:ss")`可以将日期对象格式化为指定格式的字符串...
vue3中v-model的详细使用
weixin_46406211的博客
12-06 1722
v-model可以在组件上使用以实现双向绑定。首先让我们回忆一下v-model在原生元素上的用法：template在代码背后，模板编译器会对v-model进行更冗长的等价展开。而当使用在一个组件上时，v-model要让这个例子实际工作起来，valuemodelValueinput这里是相应的代码：vue现在v-model另一种在组件内实现v-model的方式是使用一个可写的，同时具有 getter 和 setter 的computed属性。get方法需返回modelValue。
modelValue和title改了以后，好像没什么区别，那为什么要改？就是要改成title吗？就是改成修饰符了吗？是带参数的绑定，title是参数，就是带参数
weixin_40945354的博客
08-05 148
<div id="app"> <my-component v-model:title.capitalize="message"></my-component> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { mes
vue3 v-model的使用(多个 v-model 绑定)
weixin_40461134的博客
09-30 8679
//父组件 setup(props) { const msg = ref("msg"); const foo = ref('123') return{ foo,msg } } <!--父组件--!> {{modelValue}} {{msg}} <HelloWorld v-model:foo="modelValue" v-model:message="msg"></HelloWorld> <!--子组件--!> <input
v-model使用及原理
dayexiaofan的博客
05-22 3192
其他人的文章要么就写的vue2，要么就vue3，这里参照官网和其他博客整理一下。
vue3 update:modelValue使用
热门推荐
淡淡的芦苇的博客
11-22 4万+
v-model中update:modelValue v-model的主要原因是由于value和input事件可能另有它用， 那么我们可不可以直接使用另外的属性和方法，而不需要去通过model进行定义。 vue3中就实现了这个功能，v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue 写法： <ChildComponent v-model:title="title" /> //或者 <ChildCompone
十、v-model的基本使用
Sean_0819的博客
04-25 3193
登录、注册检索、创建、更新表单 input、textarea以及select元素双向数据绑定控件类型但 v-model 本质上不过是语法糖监听用户的输入事件来更新数据input里面的value属性，是决定当前输入框里的默认值的。此时我想把meesage绑定成input里面的默认的值，我该怎么去操作呢？那此时我在页面输入框里输入新的值的时候，是不是我还得把输入的内容再传给message？那我有一个疑惑，我怎么才能把我输入的内容再绑定给message呢？
Vue3 - 组件的v-model
博客
03-06 1569
Vue3中组件标签上v-model的使用
【Vue.js 3.0】 emit(“update:modelValue“) 双向绑定
day day up
07-05 6927
在Vue 3中，emit('update:modelValue')的作用是触发一个名为update:modelValue的自定义事件。这个事件通常用于实现父子组件之间的双向数据绑定
vue自定义组件v-model
07-29
另一种实现v-model的方式是使用一个可写的计算属性，同时具有getter和setter。getter方法返回modelValue prop的值，而setter方法触发相应的事件。下面是一个示例组件的代码： ```javascript // CustomInput.vue ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值