Vue的条件渲染和对象渲染

条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

v-if

条件判断使用 v-if 指令

v-else

v-else 指令给 v-if 添加一个 “else” 块

v-else-if

用作 v-if 的 else-if 块

v-show

使用v-show 指令显示和隐藏元素，与v-if最大区别在于v-show不删除元素

<div id="app"> <div v-if="bool2">111</div> <!-- bool2为false,则销毁本行代码,不显示--> <!-- if else --> <div v-if="bool2">v-if</div> <div v-else>else</div> <!-- 如果上面的if语句执行成功,则默认忽略本行代码,不显示--> <!-- 多重渲染的写法 --> <div v-if="type == 'A'">A</div> <div v-else-if="type == 'B'">B</div> <div v-else>daqiu</div> <!-- v-show="bool":true显示 false隐藏display：none --> <div v-show="bool2">v-show</div> </div> <script> var vm = new Vue({ el: '#app', data: { bool1: true, bool2: false, type: 'D' } }) </script>

列表与字典对象渲染

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象

语法格式： v-for= ‘’ item in items"

<div id="app"> <!-- v-for="临时变量 in 列表" --> <ul> <li v-for="i in list1">{{ i }}</li> <!--遍历list1将每一个元素组成一行<li>标签代码--> </ul> <ul> <!-- 1:数据；2：下标 --> <!-- <li v-for="(1, 2) in list"></li> --> <li v-for="(i, j) in list1">{{j+1}}、{{i}}</li> </ul> <ul> <!-- js对象(字典) --> <!-- i 表示的是value --> <li v-for="i in dict1">{{ i }}</li> </ul> <ul> <!-- 注意,第一个为值 ,第二个为键 (使用 键:值 的时候要把参数反过来)--> <li v-for="(value, key) in dict1">{{key}}:{{value}}</li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { // 数组 list1: ['朱毅', '王金泉', '林招亮'], // 字典对象 dict1:{'name':'小张','age':30} } }) </script>

绑定表单数据

v-model 指令用于设置表单控件value属性值

数据双向绑定：当数据发生变化的时候,视图也就发生变化,当视图发生变化时,数据也会跟着同步变化

文本输入框、下拉框框架绑定 <div id="app"> <!-- v-model的值用于设置表单控件value属性值--> <input type="text" v-model="txt1"> <div>{{txt1}}</div> <select v-model="sel1"> <!--绑定sel1,默认值为data中定义的0--> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> </select> <div>{{sel1}}</div> <!--只要下拉框中绑定的sel1改变,会及时刷新显示--> </div> <script> var vm = new Vue({ el: '#app', data: { txt1: '默认值', sel1: 0 } }) </script> 单选框、复选框数据绑定 <div id="app"> <div>{{myradio}}</div> 性别： <!-- 单选框绑定--> <input type="radio" name="names" v-model="myradio" value="nan"> 男 <input type="radio" name="names" v-model="myradio" value="nv"> 女 <div>{{list1}}</div> 兴趣爱好： <input type="checkbox" value="read" v-model="list1"> 读书 <input type="checkbox" value="bahe" v-model="list1"> 拔河 <input type="checkbox" value="lol" v-model="list1"> lol </div> <script> var vm = new Vue({ el: '#app', data: { myradio: 'nan', list1: ['bahe'] } }) </script>