vuejs2/test2.html at master · yht7com/vuejs2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VueJS2 使用条件判断-vuejs实战教程[云海天教程]</title>
    <meta name="keywords" content="Vue.js 教程,vue教程,新手入门教程,vue实例教程,vue基础教程,vue教程案例实战项目,最全vue项目实战">
    <meta name="description" content="Vuejs使用条件判断,vuejs实战教程">

	</head>
	<body>
    <div id="app">
      <!-- 第三步输出 -->
       <h1 v-if="finished">{{ message }}</h1>

        <!-- 字符串判断类似v-if = "number = 'hello' " -->
       <h2 v-if=" number > 10">我大于10</h2>
       <h2 v-else-if=" number >= 5 && number <= 10 ">我大于5 小于10</h2>
       <h2 v-else=" number < 5 ">我小于5</h2>
<hr>
<!-- tab 切换开始 -->
  <h3 v-show="tab==1">首页</h3>
  <h3 v-show="tab==2">列表页</h3>
  <h3 v-show="tab==3">个人中心</h3>
  <button @click="changeTab" data-id='1'>首页</button>
  <button @click="changeTab" data-id='2'>列表页</button>
  <button @click="changeTab" data-id='3'>个人中心</button>
  <!-- tab 切换结束 -->
    </div>
    <!-- 第一步引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <!-- 第二步定义 -->
    <script type="text/javascript">
      let app = new Vue({
        el:"#app",
        data:{
          message   : "Hello",
          tab : 1,
          //添加判断 true 、false
          finished  : true,
          //判断数字
          number : 10
        },
        // tab切换方法
        methods:{
            changeTab:function(e){
              // console.log(e)
              this.tab = e.target.dataset.id;
            }
        }
      })
    </script>
<p>

  <h3>以下内容是浏览器内容输出的</h3>
  <img src="./images/02.png" ><b>
  <img src="./images/03.png" ><b>
  <img src="./images/14.png" >
<h3>源码链接:</h3>
<a href="https://github.com/yht7com/vuejs2" target="_blank" style="color: red">vuejs框架基础教程,vue教程案例实战项目</a>
	</body>
</html>