<template>
<view>
i am {{student.age + 1}} years old.<br/>
</view>
<navigator url="../hello/hello">
<view>
i am {{student.age >=18 ? '成年' : '未成年'}} <br/> *********数据展示*********
</view>
</navigator>
</template>
------------------------------------------------------------------------
<script>
data(){
return {
student:{
age:18
}
}
}
</script>
我们一直做的数据展示都是在标签之外,而没有放在<navigator>
标签里
如果要使 navigator
动态绑定的话
先在data(){}
中添加URL
data() {
return {
title: 'Hello',
student:{
age:17
},
skill:["Java","HTML","css","springcloud","vue"],
url:"../hello/hello" ************************
}
},
标签里不能使用mustache表达式, <navigator url="{{url}}">
,否则无法编译
当我们想要在标签内部使用数据绑定的时候,我们要使用v-bind:组件的属性名
这样一个指令
v-bind:组件的属性名
缩写::组件的属性名
后面组件的属性名可以是url,可以是class,可以是name,可以是id
所有的属性名都是包含在我们标签里面的v-bind:组件属性名
就表示它要与data中标签进行数据绑定
<navigator v-bind:url="url"><!-- 错误写法:url="{{url}}" --> *******或者使用缩写:url:url********
<view>
i am {{student.age >= 18? '成年' : '未成年'}} years old. <br/>
i have skills such as {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}}
</view>
</navigator>
--------------------------------------------------
data() {
return {
title: 'Hello',
student:{
age:17
},
skill:["Java","HTML","css","springcloud","vue"],
url:"../hello/hello" ************************
}
},
- 所以在标签外部数据绑定用{{mustache表达式}}
- 标签内部用
v-bind:组件的属性名
data中定义了一张图片,我们希望把这张图片渲染到页面上
利用v-bind进行渲染
<image v-bind:src="img"></image>
缩写成
<image :src="img"></image>