vue中怎么在span中调整与控件的距离_Vue学习笔记（四）

最新推荐文章于 2024-05-25 08:00:00 发布

weixin_39976951

最新推荐文章于 2024-05-25 08:00:00 发布

阅读量3k

点赞数

文章标签： vue中怎么在span中调整与控件的距离 vue中既可以选择又可以手动输入的文本框类型 vue漂亮的树控件

本文介绍了Vue中如何在span中调整与控件的距离，以及在文本框、按钮（包括单选和多选）、列表等场景下的数据绑定和修饰符的使用。详细讲解了组件的全局与局部注册，以及父子组件间的数据传递，包括动态属性和子组件回传事件的处理。

摘要由CSDN通过智能技术生成

1 表单绑定

可以利用v-model在表单控件元素上创建双向的数据绑定，v-model会根据控件类型自动选取正确的方法来更新元素。

2 文本框

文本框的绑定例子如下：

<div id="app">
    <p>input</p>
    <input v-model="message">
    <p>{
    {message}}</p>

    <p>textarea</p>
    <textarea v-model="message2"></textarea>
</div>
new Vue({
    el:'#app',
    data:{
        message:'',
        message2:''
    }
})

3 按钮

3.1 单选

data中的值为<input>的value，如：

<div id="app">
    <input type="radio" value="Value1" v-model="picked">
    <input type="radio" value="Value2" v-model="picked">
    <span>选中的值为：{
    {picked}}</span>
</div>
new Vue({
    el: '#app',
    data: {
        picked:'Value1'
    }
})

3.2 多选

单个多选绑定的数据是一个布尔值，多个多选绑定的是一个数组：

<div id="app">
    <input type="checkbox" v-model="checked">
    <span>是否选中：{
    {checked ? "选中" : "不选中"}}</span>
    <br>

    <input type="checkbox" value="Value1" id="box1" v-model="checked2">
    <label for="box1">Value1</label>
    <input type="checkbox" value="Value2" id="box2" v-model="checked2">
    <label for="box2">Value2</label>
    <input type="checkbox" value="Value3" id="box3" v-model="checked2">
    <label for="box3">Value3</label>
    <br>
    <span>选中的值为：{
    {checked2}}</span>
</div>
new Vue({
    el: '#app',
    data: {
        checke