lovecoding
/
VIP30


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{text}}
    {{html}}
    <!-- 
      数据绑定指令
      1. v-text 更新数据文本内容
      2. v-html 更新文本内容
    -->
    <div v-text="text"></div>
    <div v-html="html"></div>
    <div v-html="text1"></div>

    <!-- 
      v-if和v-show的区别
      v-show 通过display 进行控制隐藏
      v-if 不会在html里面生成 生成dom元素
      如果需要拼饭切换或者控制隐藏  v-show

    -->
    <p v-if="isLogin">已经登录</p>
    <p v-else>未登录</p>

    <p v-show="isD">已成功</p>
    <p v-show="!isD">已失败</p>


    <p v-if="a>b"> a比b大</p>
    <p v-else-if="a==b"> a等于b</p>
    <p v-else>a小于b</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        text: '文字1',
        html: '文字2',
        text1: '<p>今天比较冷</p>',
        isLogin: true,
        isD: true,
        a: 5,
        b: 6
      }
    })
  </script>
</body>

</html>