element- swtich开关按钮，显示隐藏数据

最新推荐文章于 2024-08-15 23:24:36 发布

黎成诃月

最新推荐文章于 2024-08-15 23:24:36 发布

阅读量2.6k

点赞数

分类专栏：前端-VUE

本文链接：https://blog.csdn.net/weixin_40292626/article/details/81985000

版权

前端-VUE 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<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>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<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>