Vue学习笔记05-插值表达式、v-text和v-html

前言：

插值表达式的格式：

{{表达式}}

该表达式支持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的效果会如下所示：

来源：CSDN

作者：weiweiQAQ

链接：https://blog.csdn.net/qq_42062052/article/details/103988196

标签

vue