day61
2024-09-28 14:14:33
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>
最新文章
- ASP.NET MVC 必须设置 ErrorMessageString 或 ErrorMessageResourceName，但不能同时设置二者。
- eclipse 启动失败（找不到jvm）
- elasticsearch，python包pyes进行的处理
- [分享] 晒一晒我的Windows7_SP1封装母盘（多图，附部分工具）,老鸟飘过~
- nohup之no hang up, kill, ps -ef, ps aux, grep
- 【USACO 1.2.1】挤牛奶
- Windows消息编程（写的不错，有前因后果）
- WCF入门教程系列五
- xss框架的一些想法
- base64码转图片
- c语言笔记4数据的输入和输出
- 微信小程序如何套用iconfont
- windows + php + redis的安装
- [Mac]ssh免密登陆配置
- Jquery 让contains不区分大小写
- Java中线程同步的方法
- 处理HTML表单（11）
- 第199天：js---扩充内置对象功能总结
- HDU 1823 Luck and Love 二维线段树（树套树）
- oracle 11g各种下载地址