Vue常用指令

更新时间:2020-06-16 10:14:39点击次数:282次
Vue常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.

v-if
v-show
v-for
v-text
v-html
v-clock
v-bind
v-on
v-model
v-if,v-show指令
v-if = “expression” : 根据表达式的真假来删除和插入元素
v-show = “expression” : 不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来

v-if 例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body>
<div id="app">
    <span v-if="flag">显示</span>
    <button @click="changeData" class="layui-btn">点击</button>
</div>

</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {
            changeData() {
                this.flag=!this.flag;
            }
        }
    })
</script>
</html>

v-show例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<div id="app">
    <span v-show="flag">显示</span>
    <button @click="changeData" class="layui-btn layui-icon layui-icon-logout">点击</button>
</div>

</body>
<script src="layui/layui.js"></script>
<script>

    let app = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {
            changeData() {
                this.flag=!this.flag;
            }
        }
    })
</script>
</html>

v-for指令
v-for = “item in items” : 基于一个数组渲染一个列表

v-for是Vue中的遍历(循环)指令。

(item,index) in dataList,item是遍历的每一项名称,index是每一项的索引值

索引值:{{index}}---数据:{{item}}

索引值:{{i}}--id:{{obj.id}}--name:{{obj.name}}

这是第{{count}}次循环,索引为{{index}}

key是在v-for中表示唯一标识,在任何的v-for中建议都加上key。key一定要保证唯一性

例子
<!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">
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<style>
  .red {
    color: red;
  }

  .size {
    font-size: 20px;
  }

  .back {
    background-color: green;
  }
</style>

<body>

  <div id="app">
    <!-- v-for是vue中的遍历(循环)指令。(item index) in data,item是遍历的每一项名称,index是每一项的索引值 -->
    <!-- <p v-for="(item, index) in simpleList">索引值:{{index}}---数据:{{item}}</p> -->
    <!-- <p v-for="(obj, i) in objectList">索引值:{{i}}--id:{{obj.id}}--name:{{obj.name}}</p> -->
    <!-- <p v-for="(count, index) in 10">这是第{{count}}次循环,索引为{{index}}</p> -->

    <div>
      <input type="text" v-model="id">
      <input type="text" v-model="name">
      <button @click="add">添加</button>

    </div>

    <!-- key是在v-for中表示唯一标识,在任何的v-for中建议都加上key。key一定要保证唯一性 -->
    <p v-for="item in objectList" :key="item.id">
      <input type="checkbox" name="" id=""> {{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>

    var vue = new Vue({
      el: '#app',
      data: {
        simpleList: [1, 2, 3, 4, 5, 6],
        objectList: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 4, name: '赵六' }
        ],
        id: '',
        name: '',
      },
      methods: {
        add() {
          const obj = {id: this.id, name: this.name}
          this.objectList.unshift(obj)
        }
      }
    })

  </script>
</body>

</html>

v-text,v-html,v-clock指令
v-text:会覆盖原有标签中的内容,将data中的数据作为字符串处理

v-html: 会将data作为html标签去渲染

v-clock: 占位符指令,会替换掉自己的这个占位,不会把整个元素清空

例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<div id="app">
    <div v-clock>{{msg1}},你好</div>
    <div v-text="msg">你好</div>
    <div v-html="msg2">你好</div>
</div>
</body>
<script src="layui/layui.js"></script>
<script>

    let app = new Vue({
        el: "#app",
        data: {
            msg: "我是text",
            msg1: "我是clock",
            msg2: "<span style='color: red'>我是html</span>"
        },
    })
</script>
</html>

页面展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wgZfpEi-1591757039890)(en-resource://database/498:1)]

v-bind,v-on指令
v-bind:Vue中提供用户绑定属性的指令,也可以写成:
v-on:Vue提供的事件绑定指令,也可以简写成@

例子
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<div id="app">
    <a v-bind:href="msg">按钮</a>
    <button v-on:click="add" class="layui-btn">点击</button>
</div>
</body>
<script src="layui/layui.js"></script>
<script>
layui.use(["layer"],function () {
    let app = new Vue({
        el: "#app",
        data: {
            msg: "www.baidu.com",
        },
        methods:{
            add(){
                layer.alert("123");
            }
        }

    })
})

</script>
</html>

v-model指令
v-model : 数据的双向绑定 , 只能用于表单元素. 一方被修改之后另一方也会同步修改
v- bind : 数据的单向绑定. 当model中数据被修改是 , bind绑定的数据会被修改. 而bind绑定的位置改变model则不会被修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <input type="text" :value="msg1">

</div>

</body>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer'], function () {
        let app = new Vue({
            el: "#app",
            data: {
                msg: "v-model的值",
                msg1: "V-bind的值"
            },
            methods: {}

        })
    })

</script>
</html>

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息