2025.8.14 vue学习笔记

vue的双向绑定
(一)单选

<input> 是一个自闭合标签，即它没有结束标签。
1.type：定义输入框的类型。radio：单选按钮。//所以type="radio"就是单选按钮
2.name：定义输入框的名称，用于在表单提交时标识数据。
3.value：定义输入框的默认值。
4.如果选择了其他的，就直接搜input的常见属性即可

v-model="message"//绑定用v-model

<body>
    <div id="app">
        性别
        <input type="radio" name="sex" value="男" v-model="message">男
        <input type="radio" name="sex" value="女" v-model="message">女
        <p>
            选中了谁：
            {{message}}
        </p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:""
            }
        });
    </script>
</body>

（二）下拉框

1.<select> 标签：用于创建下拉选择框。里面套着option标签，表示选项
2.v-model="message"：将下拉选择框的值与 Vue 实例中的 message 数据绑定。

<body>
    <div id="app">
        <select v-model="message">
            <option >---请选择---</option>
            <option >A</option>
            <option >B</option>
            <option >C</option>
        </select>
        <span>选择的是：{{message}}</span>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:""
            }
        });
    </script>
</body>

（三）vue组件
Vue.component(" ",{})//定义vue组件
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

<body>
    <div id="app">
        <myfunction v-for="item in items" v-bind:myitem="item"></myfunction>
    </div>
    <script>

        Vue.component("myfunction",{
            props:['myitem'],
            template:'<li>{{myitem}}</li>'
        });

        var vm=new Vue({
            el:"#app",
            data:{
                items:["java","Linux","前端"]
            }
        });
    </script>
</body>
posted @ 2025-08-14 11:29  Granya  阅读(6)  评论(0)    收藏  举报