插值表达式
插值表达式用法:{{}}
<div class="box">
<!-- 使用{{}}能够插入自己想要的值 -->
<div>{{name}}</div>
<p>{{age+10}}</p>
<div>函数{{fn()}}</div>
<div>函数加内容{{fn()+"hhh"}}</div>
<div>三目运算符{{test==10?"hello":"7777"}}</div>
<!-- 由于{{}} 是一种插值表达式 会作为js语法执行环境 就可以理解为能直接在插值里面写一些方法(不代表所有js语法)-->
<div>{{10>9?"正确":"错误"}}</div>
<div>{{10<7&&"正确"||"错误"}}</div>
</div>
<script>
//方法一
var vm = new Vue({
el: ".box",
data: {
name: "小名",
age: 20,
fn: () => {
return "你好"
},
test: 10
}
})
</script>
插值表达式支持一些js数据类型,但window下面的全局变量不支持
<div class="box3">
<!-- 使用for循环会报错 -->
<!-- <div>{{for(let i=0;i<arr.length;i++)}}</div> -->
<!-- console.log报错 -->
<!-- <div>{{ console.log(arr)}}</div> -->
<div>{{arr.join("")}}</div>
<!-- aa属于window全局变量,不支持 -->
<div>{{aa}}</div>
</div>
<script>
// 错误示范
let aa="不支持"
new Vue({
el:".box3",
data:{
arr:[1,2,4,3]
}
})
</script>
指令
- v-clock 在vue框架运行时 项目中的v-clock属性进行隐藏 把v-clock放在最外层标签 方便统一
- v-html 相当于innerHTML 标签再添加内容将被忽视
- v-text 相当于innerText
- v-pre 插件表达式会被识别为文本内容,而不是js表达式
<div id="app" v-clock>
<div>{{name}}</div>
<div v-html="book">{{book}}</div> <!--字体变粗-->
<div v-html="book">66666</div><!--字体变粗-->
<div v-text="book"></div><!--<b>字体变粗</b>-->
<div v-pre>{{cs}}</div><!--{{cs}}-->
</div>
<script>
new Vue({
el:"#app",
data:{
name:"小明",
cs:"今天星期一",
age:22,
book:"<b>字体变粗</b>"
}
})
</script>
属性绑定
v-bind 可以为元素的属性动态绑定属性值 vue 规定(类似语法糖)v-bind:指令可以简写成":"
<div id="app">
<div>{{obj.name}}</div> <!-- 小红 -->
<div>{{obj.obj2.name}}</div> <!-- 小明 -->
<div v-html="obj.obj2.name"></div><!-- 小明 -->
<!-- v-bind 可以为元素的属性动态绑定属性值 vue 规定v-bind:指令可以简写成":"-->
<div v-bind:class="box"></div>
<a v-bind:href="taobao[0].dizhi">{{taobao[0].name}}</a>
<!-- 简写":" -->
<input type="text" :value="emial">
<img :src="obj.img" >
</div>
<script>
new Vue({
el:"#app",
data:{
box:"p",
obj:{
name:"小红",
obj2:{
name:"小明"
},
img:"https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661878800&t=c1135c11230bcc19ec13b67b3ae3d94b"
},
taobao:[{
dizhi:"https://www.taobao.com/",
name:"淘宝一下"
}],
emial:"2656143637@qq.com"
}
})
</script>