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>