<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tooltip :content="'Switch value: ' + value5" placement="top">
<el-switch v-model="value5" active-color="#13ce66" inactive-color="#ccc" active-value="true" inactive-value="false" @change="change">
</el-switch>
</el-tooltip>
<transition>
<div v-show="isShow">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</transition>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var Main = {
data() {
return {
value5: '1',
isShow : false,
}
},
methods:{
change(data){
if(data == "true"){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
