2.VUE标签指令

Vue.js开发来源：网络编辑：小编更新时间：2024-11-29 11:27:07 浏览量：32

标签指令：v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text">
    <button>提交</button>
    <ul>
        <li v-for="item in list">{
  
  
  
  
  
  
  
  {item}}</li>
    </ul>
</div>
<script>
var app=new Vue({
    el:'#app',
    data:{
        //键值对【Vue实例中的具体数据】
        list:["第一课的内容","第二课的内容","第三课的内容"]
    }
})
</script>
</body>
</html>

总结：

v-for：用于循环数据
v-for="item in list" 告诉vue:li中要循环list 循环后的每一项都放在item中然后即可使用item
list：data中的list数据
item：即指循环过程中list的每一项内容【list中的每一项】

标签指令：v-on【在VUE中绑定事件】

v-on：在模板的button上绑定事件
用:修饰这个事件绑定的事件是click事件
事件名称为handleBtnClick 将这个方法定义在VUE实例中的metnods键值对中
简写@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <li v-for="item in list">{
  
  
  
  
  
  
  
  {item}}</li>
    </ul>
</div>
<script>
var app=new Vue({
    el:'#app',
    data:{
        list:["第一课的内容","第二课的内容","第三课的内容"]
    },
    methods:{
        handleBtnClick(){
            alert("click")//只要button点击 就会执行handleBtnClick方法
        }
    }
})
</script>
</body>
</html>

标签指令：v-model【使用Vue.js实现TodoList：http://www.todolist.cn/】

v-model：数据的双向绑定当input框中的内容发生变化的时候 VUE实例中的data中的inputValue也会发生变化；当VUE实例中的data中的inputValue变量发生变化时页面也会跟着发生变化【将input的value值和data中的inputValue做了绑定一个变化另一个就会跟着变】

点击button时拿到input输入框的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <li v-for="item in list">{
  
  
  
  
  
  
  
  {item}}</li>
    </ul>
</div>
<script>
var app=new Vue({
    el:'#app',
    data:{
        list:["第一课的内容","第二课的内容","第三课的内容"],
        inputValue:"",//数据绑定
    },
    methods:{
        handleBtnClick(){
            // 在handleBtnClick方法中获取inputValue
            console.log(this.inputValue)//VUE实例会自动去data中找inputValue
            this.list.push(this.inputValue)
            this.inputValue=""//清空
        }
    }
})
</script>
</body>
</html>

标签指令：v-bind

传入绑定值
v-bind简写:

到此这篇2.VUE标签指令的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： 3.VUE的MVVM设计模式

下一篇： 1.VUE方法实现Hello World及隔2秒钟更改content中的内容

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11188.html

相关文章：