|
v-model input中使用双向绑定数据
v-model在vue中我们经常用它与input输入框的输入值进行绑定，简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定，如下vue3实现代码: <template> <input type="text" :value="tryText" @input="handelInput"> <h2>{{tryText}}</h2></template><script>import { ref} from "vue" export default { setup(){ let tryText = ref("默认输入值") function handelInput(e) { tryText.value = e.target.value;//ref定义的数据访问和修改需要通过.value } return{ tryText, handelInput } } }</script>相信大家经常使用v-model在ipnut中，现在让我们来看看在组件中如何使用v-model以及它的作用是啥
组件中的v-model
组件中如何使用v-model呢？我们来简单实现下 父组件 <template> <!-- 组件绑定 v-model --> <hy-input v-model="message"></hy-input> <h2>{{message}}</h2></template><script>import { ref } from '@vue/reactivity'import HyInput from "../components/HyInput.vue"export default { components: {HyInput }, setup(){ let message = ref("嘿嘿嘿
下载地址:
vue3.0手动封装分页组件的方法
vue3递归组件封装的全过程记录 |
