一、v-bind指令:动态绑定一个或者多个属性
<template>
<view >{{message}}</view>
// 1.v-bind的基本用法
<view v-bind:src="baiduUrl">百度一下</view>
// 语法糖:简写 :
<view :src="baiduUrl">百度一下</view>
</template>
<script>
data(){
return{
baiduUrl:'http:www.baidu.com'
message:'Hello World'
}
}
</script>
-------------------------------------------------------------------------------------------------------------------------
// 2.v-bind绑定class
<template>
<view>{{message}}</view>
// 2.1对象语法 可以通过布尔值控制active这个值有没有绑定 false表示view标签上没有active这个类 true表示view标签上有active这个类
<view :class="{'active':false}"></view>
// 2.1.2可以绑定多个类名 用逗号隔开 类名可以不加引号
<view :class="{'active':false,'title':true}"></view>
// 2.1.3默认class和动态class结合
<view class="abc" :class="{'active':false,'title':true}"></view>
// 2.1.4将对象放到一个单独的属性中
<view class="abc" :class="{classObj}"></view>
// 2.1.5将返回的对象放到一个methods方法中
<view class="abc" :class="{getclassObj()}"></view>
-------------------------------------------------------------------------------------------------------------------------
2.2数组语法 把多个属性一起绑定到class上
<view :class="['abc',title']"></view>
2.2.1三元运算符的写法
<view :class="['abc',title,isActive?'active':'']"></view>
2.2.2数组嵌套对象语法
<view :class="['abc',title,{isActive?'active':''}]"></view>
</template>
<script>
data(){
return{
message:'Hello World',
title:'cba',
isActive:true,
classObj:{active:false,title:true}
}
},
methods:{
getclassObj(){
return {
active: true,
title: true
}
}
}
</script>
-------------------------------------------------------------------------------------------------------------------------
// 3.v-bind绑定style
<template>
// 3.1对象语法
// 3.1.1 支持驼峰写法fontSize 'font-size' 写法加引号
<view :style="{color:'red','font-size':'12px'}">{{message}}</view>
// 3.1.2也可以是一个对象数据
<view :style="finalStyleObj">{{message}}</view>
// 3.1.3也可以放到一个method方法中
<view :style="getFinalStyleObj()">{{message}}</view>
-------------------------------------------------------------------------------------------------------------------------
3.2数组语法
<view :style="[style1Obj, style2Obj]">哈哈哈</view>
3.2.1
</template>
<script>
data(){
return{
message:'Hello World,
finalStyleObj: {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
},
style1Obj: {
color: 'red',
fontSize: '30px'
},
style2Obj: {
textDecoration: "underline"
}
}
},
methods: {
getFinalStyleObj() {
return {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
}
</script>
-------------------------------------------------------------------------------------------------------------------------
4.v-bind动态绑定属性名称
<template>
<view :[name]="value">{{message}}</view>
</template>
<script>
data(){
return{
name:'abc',
value:'kobe'
message:'Hello World'
}
}
-------------------------------------------------------------------------------------------------------------------------
5.v-bind动态绑定一个对象 属性名称和属性值一一对应
<template>
<view v-bind="info">哈哈哈哈</view>
</template>
<script>
data(){
return{
info: {
name: "why",
age: 18,
height: 1.88
}
}
}
</script>
</script>
二、v-on指令
二、v-if指令
1.单个条件判断元素的显示和隐藏
<template>
<view>
<view v-if="isShow">哈哈哈哈</view>
<view @click="toggle">切换</view>
</view>
</template>
<script>
data() {
return {
message: "Hello World",
isShow: true
}
},
methods: {
toggle() {
this.isShow = !this.isShow;
}
}
}
// JavaScript条件判断
if (true) {
}
</script>
2.多个条件的渲染
<template>
<view>
<input type="text" v-model="score">
<view v-if="score > 90">优秀</view>
<view v-else-if="score > 60">良好</view>
<view v-else>不及格</view>
</view>
</template>
<script>
data() {
return {
score: 95
}
}
</script>
三、v-for指令
<template>
<view>电影列表</view>
<text>
<!-- 遍历数组 -->
<text v-for="(movie, index) in movies">{{index+1}}.{{movie}}</text>
</text>
<view>个人信息</view>
<view>
<!-- 遍历对象 -->
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</view>
<view>遍历数字</view>
<view>
<text v-for="(num, index) in 10">{{num}}-{{index}}</text>
</view>
</template>
<script>
data() {
return {
movies: [
"星际穿越",
"盗梦空间",
"大话西游",
"教父",
"少年派"
],
info: {
name: "why",
age: 18,
height: 1.88
}
}
}
</script>
四、Mustache语法(模板语法) --- {{}}
// 1.{{}} 可以是一个data里定义的数据
<template>
<view>{{message}}</view>
</template>
<script>
data(){
return{
message:'Hello World'
}
}
</script>
-------------------------------------------------------------------------------------------------------------------------
<template>
// 2.{{}}也可以是一个表达式
<view>{{message.split(' ').reserve().join(' ')}}</view>
// 3.<view>{{getReverseMessage()}}</view>显示一个函数的调用结果
// 4.{{}} --- computed 计算属性的结果
// 5.是一个三元表达式 isTrue为true则显示哈哈哈为false则为空
<view>{{isTrue ? '哈哈哈 : ' ' '}}</view>
</template>
// 6.错误语法
<view>{{var name = 'abc'}}</view>
<script>
data(){
return{
isTrue:'哈哈哈'
message:'Hello World'
}
},
methods:{
getReverseMessage(){
return message.split(' ').reserve().join(' ')
}
}
</script>
五、v-once:只渲染一次 (不常用)
六、v-text和v-html
<template>
// 等同于下面的{{}}语法
// v-html和v-text的区别 v-html会解析html标签 将html标签也显示在页面上
<view v-text="message"></view>
<view>{{message}}</view>
<template/>
<script>
data(){
return{
message:'Hello World'
}
}
</script>
七、v-pre
<template>
<view v-pre>{{message}}</view> // 展示结果为{{message}}
</template>
<script>
data(){
return{
message:'Hello World'
}
}
</script>