欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue.js——复习Vue.js指令

程序员文章站 2022-05-15 22:46:34
...
<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.js的指令</title>
    <script src="../libs/vue.min.js"></script>
</head>
<body>
    <!-- v-if指令将根据表达式seen的值（true or false ）来决定是否插入 p 元素。 -->
    <!-- <div id="app">
        <p v-if="seen">可以被看到，此时seen 的值为true </p>
        <template v-if="ok">
          <h1>百度 此时ok 的值为true</h1>
        </template>
    </div> -->

    <!-- v-else指令 -->
    <!-- 
        <div v-if="Math.random() > 0.5">
        <p>随机生成一个数字，判断是否大于0.5，然后输出对应信息：</p>
            Sorry
        </div>
         <div v-else>
         Not sorry
         </div>
    -->

    <!-- v-show指令 根据条件展示元素 -->

    <h1 v-show="ok"> 此时ok 的值为true Hello!</h1>

<script>
    new Vue({
      el: '#app',
      data: {
        seen: true,
        ok: true
      }
    })
</script>
</body>

Vue.js——v-for的使用

<body>
    <div id="app">
        <ol>
            <!-- v-for 指令需要以 site in sites 形式的特殊语法 ，
                sites 是源数据数组并且 site 是数组元素迭代的别名。、
            -->
          <li v-for="site in sites">
            {{ site.name }}
          </li>
        </ol>

        <!-- 
            v-for 可以通过一个对象的属性来迭代数据
        -->

        <ul>
            <li v-for="(value,key,index) in object">{{ index }} : {{ key }} : {{ value }} </li>
        </ul>
    </div>
       
    <script>
      new Vue({
        el: '#app',
        data: {
          sites: [
            { name: 'Runoob' },
            { name: 'Google' },
            { name: 'Taobao' }
          ],
          object:{
              name:'百度',
              url:'www.baidu.com',
              des:'度娘知道很多秘密'
          }
        }
      })
    </script>

Vue.js——v-model的使用

<body>
    <!-- 
        用 v-model 指令在表单控件元素上创建双向数据绑定
        v-model 会根据控件类型自动选取正确的方法来更行元素。
     -->
    <div id="app">
        <p> input 元素:</p>
        <input v-model = 'message' placeholder="编辑此文本">
        <p>消息是 ：{{ message }}</p></p>

        <p>textarea 元素：</p>
        <p style="white-space: pre">{{ message2 }}</p>
        <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

        <!-- 在复选框中 使用 v-model 来实现双向数据绑定 -->
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
            
        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'度娘',
                message2:'百度网址：www.baidu.com',
                checked:false,
                checkedNames:[]
            }
        })
    </script>
</body>
相关标签： Vue.js

上一篇： 品牌管理案例、过滤器、自定义指令、生命周期

下一篇： 这时候老板看见了

推荐阅读