vue--input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 将单选按钮绑定到同一个picked -->
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <!-- <label for="two">Two</label> -->
        <br>
        <span>Picked: {{ picked }}</span>
        <button @click='getValue()'>点击</button>


        <!-- 下拉选框 -->
         <!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
         <select v-model="selected">
                <!-- 固定赋值value -->
                <option value="abc">ABC</option>
                <!-- 使用 v-bind 绑定值 -->
                <option :value="optionValue">DEF</option>
            </select>
            <p>{{selected}}</p>
    </div>
    <script>
        var vue = new Vue({
            el:'#app',
            data() {
                return {
                    picked: '',
                    selected: '',
                    //第二个option 的值
                    optionValue:'efg'
                }
            },
            methods() {
                getValue => { console.log(vue)}
            }
        })
    </script>
</body>
</html>
posted @ 2020-06-12 15:38  无辜鱼粉  阅读(282)  评论(0编辑  收藏  举报