02-Vue的指令系统

最新推荐文章于 2022-10-16 14:07:00 发布

凇戈

最新推荐文章于 2022-10-16 14:07:00 发布

阅读量143

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42443397/article/details/101723817

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <div id="app"></div>
   <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
   <script type="text/javascript">

// v-text innerText 相对而言使用不多
// v-html innerHTML

       // v-if是真正的条件渲染，DOM元素被切换的过程被销毁和重建
       // v-if 是懒惰的。如果初始条件为假，则什么都不做，直到渲染条件变为值，才会开始渲染条件块
       // v-show 不管你的初始条件是什么，元素总是会被渲染，并且只是简单的基于css样式进行切换

// 一般来说， v-if 有更高的切换开销，v-show 有更高的初始渲染开销

// 关注的视图层
       new Vue({
           el:'#app',
           template:`
               
               <div>
                   <div v-html = 'msg2'></div>
                   <div v-if = 'isShow'>哈哈哈哈</div>
                   <div v-show = 'isShow'></div>
                   <div v-if = 'Math.random() > 0.5'>
                       此值大于0.5
                   </div>
                   <div v-else>
                       此值小于0.5
                   </div>
                   <ul>
                       <li v-for = '(item,index) in menuLists'>
                           <h3>{{ index }}</h3>
                           <h5>{{item.name}}</h5>
                           <h4>{{item.price}}</h4>

                       </li>
                   </ul>
                   <ul>
                       <li v-for = '(value,key) in object'>
                           {{ key }} -- {{value}}
                       </li>
                   </ul>
               </div>
           `,
           data:function(){
               return {
                   msg:"指令系统",
                   msg2:"<h2>指令系统</h2>",
                   isShow:true,
                   menuLists:[
                       {id:1,name:'红烧肉',price:60},
                       {id:2,name:'宫保鸡丁',price:30},
                       {id:3,name:'炸黄花鱼',price:20}

                   ],
                   object:{
                       name:'凃sir',
                       age:18,
                       fav:'唱歌'
                   }
               }
           }
       });
   </script>

</body>
</html>

凇戈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-Vue的指令系统

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div id="app"></div> <scrip...
复制链接

扫一扫