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

<!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能够解析出网址格式

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则是一个计算属性，不同的是计算属性值会基于其响应式依赖被缓存
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>{{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为计算属性，有缓存