一、VUE中操作
展示：
代碼如下：
1 <template> 2 <div > 3 <el-row style="height:40px" type="flex"> 4 <el-col :span="3"> 5 <el-button type="button" @click="show()">點擊</el-button> 6 </el-col> 7 <div v-show="isShow"> 8 <el-col :span="24"> 9 <p>{{res}}</p></el-col> 10 11 </div> 12 </el-row> 13 </div> 14 </template> 15 <script> 16 export default { 17 data() { 18 return { 19 isShow: false, 20 } 21 }, 22 methods: { 23 show(){ 24 this.isShow = !this.isShow 25 this.res = '要展示的內容' 26 }, 27 28 } 29 } 30 </script>
二、html中操作
效果：
代碼如下：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 </head> 5 <body> 6 <div> 7 <button type="button" id='show'>點擊</button> 8 <div id='show1' style="display:none"> 9 <div><h4>展示結果：</h4></div> 10 <div id="show2"></div> 11 </div> 12 13 </div> 14 </body> 15 //根據實際路徑填寫 16 <script type="text/javascript" src="static/js/jquery.min.js"></script> 17 <script type="text/javascript" src="static/js/main.min.js"></script> 18 <script type="text/javascript"> 19 $('#show').on('click', function () { 20 result = '<div ">展示的內容</div>' 21 22 $('#show1').show(); 23 $("#show2").html(result); 24 25 }) 26 </script> 27 28 </html>