vuejs / babel-plugin-jsx

JSX for Vue 3
https://vue-jsx-explorer.netlify.app
MIT License
1.7k stars 143 forks source link

[Question] directives:v-model or vModel?v-show or vShow? #703

Open lilijh opened 3 months ago

lilijh commented 3 months ago

🧐 Problem Description

I tried to use v-model in vue jsx,according to the doc,I used v-model to bind a value to an input element,and it worked as expected. Howerve,I found that it can also be written in the form of vModel,which works the same way. I searched many places and didn't find this form.I want to konw why this form is not in the doc.

💻 Sample code

live demo

<script setup lang="tsx">

import { ref,reactive } from 'vue';

const val = ref(1)

const isShow = ref(true)

const TestComponent = () => (
  <div>
    in script:<input vShow={isShow.value} vModel={val.value}/>
  </div>
)
</script>

<template>
  <div class="demo">
    <TestComponent />
    <div>in template:<input v-model="val" /></div>
    <div>val:{{ val }}</div>
    <button @click="isShow = !isShow">change visibility</button>
    <button @click="val++">click</button>
  </div>
</template>

🚑 Other information

sxzz commented 1 month ago

Both methods work. Feel free to send a PR about docs.