checked、disabled在原生、jquery、vue下不同写法

 

     

 

 以下是原生和jquery

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        #tab{
            　　　　　　width: 300px;
            　　　　　　margin: 30px auto;
            　　　　　}
        .tab-nav{
            　　　　　　display: flex;
            　　　　　}
        .tab-nav a{
            flex: 1;
            line-height: 40px;
            border: 1px solid #000;
            text-align: center;
            text-decoration: none;
            color: #000;}
        .tab-nav a.current{
            color: #fff;
            background: #000;
        }
        .content{
            display: none;
            width: 100%;
            height: 300px;
            color: black;
            box-sizing: border-box;
            padding: 10px;}
        .content.current{
            display: block;
        }
        /*.content1{ background: #6fcaff; }*/
        /*.content2{ background: #ffb3e6;}*/
        /*.content3{ background: #e0bd7f;}*/
    </style>

</head>
<body>
<div>
    <input type='checkbox' value="苹果">苹果
    <input type='checkbox' value="香蕉" class="banner">香蕉
    <input type='checkbox' value="orange" class="orange" checked>桔子
    <input type='checkbox' value="orange" class="orange" checked="checked">桔子
    <input type='text' value="animal" class="dog" >dog
    <input type='text' value='' class="cat" >cat
</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
    document.getElementsByClassName('banner')[0].checked = true
    document.getElementsByClassName('dog')[0].disabled = true

    $('.banner').attr("checked", true); //或 $('.banner').attr("checked", "checked");
    $('.dog').attr("disabled", true); //或 $('.dog').attr("disabled", "disabled");

    $('.banner').prop("checked", true);
    $('.dog').prop("disabled", true);

    //jQuery获取选中的checkbox
    $('input[type=checkbox]:checked');
    
</script>
</body>
</html>

 

vue下：

<div id="app">
    <div slot="childSlot" @click="checkfun" >check按钮</div>
    <input type="checkbox" id="checkbox" :checked="checkSymbol">
    <div  @click="disabledfun" >disabled按钮</div>
    <input type="text" :disabled="disabledSymbol">
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      return{
        checkSymbol: false,
        disabledSymbol: false
      }
    }，
   methods:{
      checkfun(){
        this.checkSymbol = true
      },
      disabledfun(){
        this.disabledSymbol = true
      }
  })
</script>

 

posted @ 2019-05-17 17:15  灰姑娘的冰眸  阅读(283)  评论(0)    收藏  举报