前言:
- 插值表达式的格式:
{{表达式}}
- 该表达式支持js内置语法,可以调用js的内置函数(必须有返回值)。
- 表达式必须要有返回结果,比如:1+1。像var a = 1+1这样的就不行。
- 可以直接使用Vue实例中定义的数据模型或者函数。
1.使用js内置函数示例:
<html>
<div id = "app">
{{999+999}}
</div>
</html>
2.使用数据模型的值示例:
- 定义Vue实例的数据模型:
const app = new Vue({
el: "#app", //根据名称操作div,作用域只在该div
data: {
name: "weiwei",
num: 100
}
});
- 使用该数据模型:
<html>
<div id = "app">
我是{{name}},我有{{num}}块钱。
</div>
</html>
3.使用Vue实例中的方法:
- 定义Vue实例中的方法:
const app = new Vue({
el: "#app", //根据名称操作div,作用域只在该div
data: {
name: "weiwei",
num: 100
},
methods:{ //写在methods里面
number(){
return 666; //注意,要有返回值
}
}
});
- 调用实例中的方法:
<html>
<div id = "app">
我是{{name}},我有{number()}}块钱。 // 调用实例中的方法
</div>
</html>
4.花括号表达式的弊端:
- 当我们网速慢的时候,数据不会即使渲染到视图,怎样会导致用户界面出现花括号,如下。
- 这样用户体验很不友好,Vue为我们解决了这问题,所以我们可以使用Vue提供的 v-text 和 v-html 。
5.测试v-text:
- 依旧是刚才的代码。
<html>
<div id = "app">
我是<span v-text = "name"></span>,我有{number()}}块钱。 // 调用实例中的方法
</div>
</html>
- 此时的效果:
- 这样和右边对比,页面就友好多了。
- 当然,我们也可以在标签里面设置初始值。
7.测试v-html:
- 依旧是刚才的代码。
<html>
<div id = "app">
我是<span v-html= "name"></span>,我有{number()}}块钱。 // 调用实例中的方法
</div>
</html>
- 和v-text不同的地方在于v-html可以识别数据模型里面html标签,并渲染到页面上。
- 如下定义数据模型。
const app = new Vue({
el: "#app", //根据名称操作div,作用域只在该div
data: {
name: "<p style='color: red'>weiwei</p>", //数据里面添加html标签
num: 100
},
methods:{
number(){
return 111;
}
}
});
- 使用v-html此时的效果:
- 此时如果我们使用v-text的效果会如下所示: