[JavaScript知识库]Vue基本指令 V-bind V-if V-on V-for + 其他 + Mustache语法(uni-app)

一、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>