vue2——指令渲染,{{}}渲染

博客地址 :https://www.cnblogs.com/sandraryan/

声明式的渲染,以{{}}的形式调用数据

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>介绍vue</title>
</head>
<body>
    <div id="app">
        <!-- vue是声明式的渲染,用双大括号调用,data中的数据会被通过双花括号调用 -->
        <p>{{num}}</p>
        <!-- 标签内也可以写表达式,num大于10 显示10,否则显示num -->
        <p>{{ num > 10 ? 10 : num}}</p>
        <p>{{ num || 'you'}}</p>
        <!-- v-html 指令渲染 会被解析为自定义属性-->
        <p v-html = 'num'></p>
        <p v-if = 'num ===2'>if</p>
        <p v-else>else</p>
        <!--    v-if 控制要不要创建这个节点,v-show控制要不要显示这个节点 display : none-->
        <!-- else和if 会自动互斥,else 会自动match最近的if -->
        <p v-else>another else</p>
        <p v-show = 'true'>23333</p>
        <p v-show = 'false'>404</p>
    </div>
    <!-- 在#app中的内容才会被承认vue语法,没有连接到vue原型 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
    const app = new Vue({
        el : '#app',
        data : {
            num: 2
        }
    });
    </script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/sandraryan/p/12010090.html