- 切换操作$().toggleClass()可以切换属性,原本存在的属性会被取消,原本不存在的属性会被添加上,非常方便.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 按钮激活状态</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button id="1" type="button" class="btn btn-default btn-lg ">默认按钮</button>
<script>
$("#1").click(function(){$("button[id='1']").toggleClass("active btn-default btn-primary"); } );
</script>
</body>
</html>
可在菜鸟教程尝试
-
bootstarp 框架下的dropdown下拉栏
-
修改属性值后还要通过input事件通知vue,vue才会做出相应修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 默认的导航栏</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="div1">
数据: <input v-model="name" id="1">
<button @click="doClick" >提交数据</button>
<button id="2">更新数据</button>
</div>
<script>
new Vue({
el: '#div1',
data:{
name:"abc"
},
methods:{
doClick:function(){
alert(this.name);
}
}
})
$('#2').bind('click', function(){
$('#1').val('def');
var o=document.getElementById('1');
o.focus();
o.value='哈哈';//自动赋值以后文本框已经change，理论上要发生onchange事件,但是如果不加以下这句是不会触发onchange事件的
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("input", false, true);
o.dispatchEvent(evt);
} else {
o.fireEvent("onchange");
}
}
);
</script>
</body>
</html>