当前位置：首页 > news >正文

Vue3指令（二）--v-text、v-html数据渲染，计算属性

news 来源：原创 2025/5/15 6:33:35

（一）数据渲染

1.插值表达式渲染数据

1.1实战案例

1.1.1代码：

1.1.2实现截图：

2.使用v-text和v-html来渲染数据

2.1实战案例：

2.1.1代码：

2.1.2实现截图：

（二）计算属性

1.实战案例：

①computed() 会自动从其计算函数的返回值上推导出类型：

2.实现截图

（一）数据渲染

1.插值表达式渲染数据

1.1实战案例

使用插值表达式是最直接的数据渲染方式，使用案例来展示：

1.1.1代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue</title><script src="vue.global.js"></script>
</head>
<body><div id="app">{{msg}}</div><script>Vue.createApp({setup(){return {msg:"yes"}}}).mount("#app")</script>
</body>
</html>
1.1.2实现截图：

2.使用v-text和v-html来渲染数据

2.1实战案例：

2.1.1代码：

①v-html能够解析出网址格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据渲染</title>
</head>
<body><div id="app"><h3>插值表达式渲染：{{obj.title}}</h3><h3 v-text="obj.title">v-text渲染数据</h3><h3 v-text="obj.url">v-text渲染网址</h3><h3 v-html="obj.url">v-html渲染网址</h3></div><script type="module">import {createApp,reactive} from './vue.esm-browser.js'createApp({setup(){const obj=reactive({title:"v-text数据渲染",url:"<i style='color:blue'>www.baidu.com<i/>"})return{obj}}}).mount("#app")</script>
</body>
</html>

2.1.2实现截图：

（二）计算属性

正常情况下函数的执⾏是及时的，被调⽤就会执⾏；⽽计算属性是有缓存的，计算属性根据其依赖的响应式数据变化⽽重新计算

1.实战案例：

定义了两个数据x和y，设计add()相加函数，在函数中让x和y相加，他是实施执行的，在控制台能够看到被执行的次数，而sub则是一个计算属性，不同的是计算属性值会基于其响应式依赖被缓存
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算属性</title>
</head>
<body><div id="app"><h3>{{add()}}</h3><h3>{{add()}}</h3><hr><h3>{{sub}}</h3><h3>{{sub}}</h3><input type="text" v-model.number="data.x"></div><script type="module">import {createApp,reactive,computed} from "./vue.esm-browser.js"createApp({setup(){const data=reactive({x:20,y:50})let add=()=>{console.log("add执行....")return data.x+data.y}const sub=computed(()=>{console.log("sub执行了....")return data.y-data.x})return{data,add,sub}}}).mount("#app")</script>
</body>
</html>
①computed() 会自动从其计算函数的返回值上推导出类型：

2.实现截图

可能有人要问，为什么sub被调用了两次，但是控制台只显示一次呢？

因为sub为计算属性，有缓存