条件渲染、列表渲染
Vue.js（读音 /vju?/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。
1、v-if
v-if 是根据表达式的值决定在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。
<body><div id="example"><p v-if="yes">我可以被看到</p><p v-if="no">我不能被看到</p></div> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{yes:true,no:false}}) </script><p v-if="no">我不能被看到</p>不会再DOM树中显示出来。
因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把<template>元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含<template>元素。
<body><div id="example"><template v-if="yes"><h1>我是标题H1，我可以被看到</h1><p>我是段落p，我可以被看到</p><div>我是div，我可以被看到</div></template></div> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{yes:true,no:false,}}) </script>2、v-show
另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：
<body><div id="example"><p v-show="yes">我可以被看到</p><p v-show="no">我不能被看到</p></div> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{yes:true,no:false}}) </script>不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。<p display="none">我不能被看到</p>v-show只是切换元素的 CSS 属性 display 。
3、v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
<body><ul id="example"><li v-for="(item,index) in items">{{index+1}}:{{item.message}}</li></ul> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{items:[{message:"xiaoming"},{message:"xiaohong"},{message:"xiaohei"}]}}) </script>总结
- 上一篇： [I2C]I2C总线协议图解
- 下一篇： ORACLE---数据库巡检