zoukankan      html  css  js  c++  java
  • Vue:v-model指令在其他元素类型的使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--一.-->
            <!--<label>-->
                <!--男-->
                <!--<input type="radio" v-model="sex" value="male">-->
            <!--</label>-->
            <!--<label>-->
                <!--女-->
                <!--<input type="radio" v-model="sex" value="female">-->
            <!--</label>-->
            <!--<br>-->
            <!--{{sex}}-->
    
            <!--二.-->
            <!--<label>-->
                <!--男-->
                <!--<input type="checkbox" v-model="sex" value="male">-->
            <!--</label>-->
            <!--<label>-->
                <!--女-->
                <!--<input type="checkbox" v-model="sex" value="female">-->
            <!--</label>-->
            <!--<br>-->
            <!--{{sex}}-->
            
            <!--三.-->
            <!--<textarea v-model="article"></textarea>-->
    
            <!--四.-->
            <div>你来自哪里</div>
            <select v-model="from">
                <option value="1">王家沟</option>
                <option value="2">断背山</option>
            </select>
            {{from}}
        </div>
    
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script>
    //    一.
    //    var app=new Vue({
    //        el:"#app",
    //        data:{
    //            sex:"female"
    //        }
    //
    //    })
    
    
    //    二.
    //    var app=new Vue({
    //        el:"#app",
    //        data:{
    //            sex:[]
    //        }
    //
    //    })
    
    //    三.
    //   var app=new Vue({
    //        el:"#app",
    //        data:{
    //            article:"七夕了也不知道说点啥,那就提前给大家拜个早年吧"
    //        }
    //
    //    })
    
    //    四.
           var app=new Vue({
            el:"#app",
            data:{
                from:1
            }
    
        })
    
    
    </script>
    </body>
    </html>
  • 相关阅读:
    js动画(三)
    js动画(二)
    css内容生成器
    css选择器基本属性
    css样式图片、渐变、相关小知识
    wed网页开发面试笔试必备小知识
    html5.边框属性相关知识点
    伪类选择符
    窗口尺寸小用法
    css3选择符使用个人理解。
  • 原文地址:https://www.cnblogs.com/c491873412/p/7444172.html
Copyright © 2011-2022 走看看