python学习第九十天：vue补习2

Vue

八、重要指令

• v-bind

<!-- 值a -->
<div v-bind:class='"a"'></div> <!-- 变量a --> <div v-bind:class='a'></div> <!-- 变量a, b --> <div v-bind:class='[a, b]'></div> <!-- a为class值，isA决定a是否存在(ture | false) --> <div v-bind:class='{a: isA}'></div> <!-- 多class值，是否存在 --> <div v-bind:class='{a: isA, b: isB}'></div> <!-- 多style值，my_color为变量，cyan为普通值 --> <div :style='{color:my_color, background:"cyan"}'></div> 

• v-on

<!-- 绑定函数fn1，并将事件event传递过去 -->
<div v-on:click='fn1'></div> <!-- 绑定函数fn2，并将自定义参数10传递过去 --> <div v-on:click='fn2(10)'></div> <!-- 绑定函数fn3，并将事件event与自定义参数10传递过去 --> <div v-on:click='fn2($event, 10)'></div> 

• v-model

<!-- 文本输入框：数据的双向绑定 -->
<input type="text" v-model='val' /> <textarea v-model='val'></textarea> <!-- 单个复选框：选中与否val默认值为true|false --> <input type="checkbox" v-model='val' /> <!-- 通过true-value|false-value修改默认值为true|false --> <input type="checkbox" v-model='val' true-value="选中" false-value="未选中" /> <!-- 多个复选框：val作为数组[]来使用，可以存储选中元素的value值，反之数组有对应value代表该选框选中 --> <input type="checkbox" value="男" v-model='val' /> <input type="checkbox" value="女" v-model='val' /> <!-- 单选框：val存储选中的单选框的value值 --> <input type="radio" value="男" v-model='val' /> <input type="radio" value="女" v-model='val' /> 

九、案例

• v-show

<style type="text/css"> .btn_wrap { width: 660px; margin: 0 auto; } .btn_wrap:after { content: ''; display: block; clear: both; } .btn { width: 200px; height: 40px; border-radius: 5px; float: left; margin: 0 10px 0; } .box { width: 660px; height: 300px; } .b1 {background-color: red} .b2 {background-color: orange} .b3 {background-color: cyan} .box_wrap { width: 660px; margin: 10px auto; } </style> <div id="app"> <div class="btn_wrap"> <div class="btn b1" @click='setTag(0)'></div> <div class="btn b2" @click='setTag(1)'></div> <div class="btn b3" @click='setTag(2)'></div> </div> <div class="box_wrap"> <div class="box b1" v-show='isShow(0)'></div> <div class="box b2" v-show='isShow(1)'></div> <div class="box b3" v-show='isShow(2)'></div> </div> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { tag: 0 }, methods: { isShow (index) { return this.tag === index; }, setTag (index) { this.tag = index; } } }) </script> 

• v-for

<div id="app">
    <div> <input type="text" v-model="inValue"> <button @click='pushAction'>提交</button> </div> <ul> <li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { inValue: '', list: [] }, methods: { pushAction: function () { this.list.push(this.inValue); this.inValue = '' }, deleteAction: function (index) { this.list.splice(index, 1); } } }) </script>