vue指令复习

最新推荐文章于 2024-08-30 20:29:15 发布

&&月弥

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量297

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_57714322/article/details/140554468

版权

<!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>Vue指令</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
      {{title}}
      <!-- 取数组的元素 -->
      {{[1,2,3,4][0]}}
      <!-- 调用方法 -->
      {{sayHello()}}
      <!-- 指令 -->
      <p v-if="flag">
          今天天气不错
      </p>
      <p v-else="rich">适合钓鱼</p>
      <p v-else-if>都给我去吃烧烤</p>
      <ul>
          <!-- 遍历数组中的值 -->
          <li v-for="a in args">{{a}}</li>
      </ul>
      <ul>
          <!-- 带索引 -->
          <li v-for="(a,i) in args">{{i}}-->{{a}}</li>
      </ul>
      <!-- 遍历对象 -->
      <ul v-for="(v,k,i) in student">{{v}}-->{{k}}-->{{i}}</ul>
      <ul>
        <!-- 遍历数组保对象 -->
        <li v-for="student in students">
           <span v-for="(v,k,i) in student">{{i+1}}-->{{k}}-->{{v}} </span></br>
        </li>
      </ul>
    </div>
    <div id="app1">
        <p>{{message}}</p>
        <!-- 调用方法 -->
        <button @click="reverseMessage">反转信息</button> <br>
        sum={{sum}} <br/>
        {{sum >10? '总数大于10':'总数不大于10'}} <br/>
        <button type="button" @click="increase(2)">自增2</button>
    </div>
</body>
<script>
    new Vue({
        //element的简称，就是vue实例挂载元素的节点，值可以使CSS选择器
        el: "#app",
        // 用户提供的数据的对象
        data: {
            title:"你要在你所热爱的世界里闪闪发光",
            age:19,
            flag:false,
            rich: false,
            args:[11,20,23,46,34,55,63],
            student: {
                name:"小鱼",
                age:20,
                girl:"如花"
            },
            students:[
              {
                  name:"张三",
                  age:18
              },
              {
                  name:"李四",
                  age:20
              }
            ]
        },
        //方法
        methods: {
            sayHello: function() {
                return alert("hello vue")
            }
        },
    })
    new Vue({
        el: "#app1",
        data: {
            message: "Hello Vue.js",
            sum:0
        },
        methods:{
            reverseMessage: function(){
                this.message = this.message.split('').reverse().join('')
            },
            increase:function(s){
              this.sum+=s
            }
        }
    })
</script>
</html>