目录
1.v-bind
v-bind 是vue 中, 提供的用于绑定属性的指令”。绑定标签的属性,如src,title等,元素的属性在标签的内部。完整写法为v-bind:属性名。简写方式为:“:”
<template>
<view class="content">
<h2>图片</h2>
<img v-bind:title="imgTitle">
<br>
<input type="button" value="修改状态" @click="changeTitle">
</view>
</template>
<script>
export default {
data() {
return {
imgTitle: "图片标题",
isActive: true
}
},
onLoad() {
},
methods: {
changeTitle:function(){
this.imgTitle = "test"
}
},
}
}
</script>
2.v-show
与v-if的效果相同,不同的是,v-show是给元素加上display:none,而v-if是直接将节点在DOM上删除。所以需要频繁切换的时候用v-show。
3.v-if
v-if指令的作用是:根据表达式的真假(true,false)切换元素的显示状态。
<view class="" @click="check">点击切换显示</view>
<view v-if="isShow">显示1</view>
<view v-else>显示2</view>
4.v-for
v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在 v-for 的时候,建议设置 key 值,并且保证每个 key 值是独一无二的。
代码:
<view class="content">
<view>
<view v-for="(stu,index) in stuArray">
<view>{{"姓名:"+stu.name+",年龄:"+stu.age+",序号:"+index}}</view>
<view>
擅长技能:
<block v-for="sk in stu.skills">
{{sk}},
</block>
</view>
</view>
</view>
</view>
data() {
return {
stuArray: [{
name: "张三",
age: 12,
skills: ["Java", "C#", "Python"]
},
{
name: "李四",
age: 13,
skills: ["Sing", "Dance", "Rap", "Basketball"]
},
{
name: "王五",
age: 14,
skills: ["Piano", "Guitar", "Trumpet"]
}
]
}
},
5.v-on
用于绑定HTML事件,简写:“@”,其中的click是点击事件。
<view class="">
<button @click="Jump">点击跳转</button>
</view>
6.v-modle
v-model是Vue用于表单元素上创建双向数据绑定。
也是需要给一些输入的 功能 进行一下双向绑定 比如说input、textarea
<input v-model="name" @input="inputName" type="text" placeholder="请输入你的姓名" style="background: skyblue;" />
name:'我叫强哥'