Vue.js学习笔记——条件、循环、双向绑定

* v-if：条件判断式，根据表达式的true/false值判断元素是否显示，它是Virtual DOM，如果是false内容直接不加载

<p v-if="see">你能看到我吗?</p>

* v-for：处理数组循环，将数据循环显示到页面上

<ul>
    <li v-for="city in cityList">
        {{ city.name }}
    </li>
</ul>

综合示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="myApp">
    <h2>城市列表</h2>
    <div v-if="see">你能看到我吗?</div>
    <ul>
        <li v-for="city in cityList"><!--循环城市列表-->
 {{city.id}}：{{city.name}}
        </li>
    </ul>
</div>
<script>
 var myApp=new Vue({
 el:'#myApp',
 data:{
 see:true,//v-if的值，如果是true加载，false则不加载
 cityList:[//城市列表数组
                {id:1,name:'北京市'},
                {id:2,name:'上海市'},
                {id:3,name:'广州市'},
                {id:4,name:'杭州市'}
            ]
        }
    })
</script>
</body>
</html>

* 运行结果如下，v-if 如果是false，数据直接不加载：

* v-model：实现表单输入和应用状态之间的双向绑定。

在data中定义一个数据变量，在input标签中用v-model绑定这个变量，改变了输入框内容，该变量就会随着输入框内容的变化而实时变化。

<div id="myApp" class="container">
    <h1>{{message}}</h1>
    <input class="form-control" v-model="message"><!--2.绑定这个数据变量-->
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            message: 'Hello w3h5!'//1.定义一个数据变量
        }
    })
</script>

效果如下：

* v-on：为了让用户和你的应用进行互动，可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

例如，用v-on指令监听 click 点击事件，实现文字的反转：

<div id="myApp">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            message: 'Hello w3h5!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>

效果如下：

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。

未经允许不得转载：前端资源网 - w3h5 » Vue.js学习笔记——条件、循环、双向绑定

{{message}}

相关推荐

评论沙发

{{message}}

相关推荐

评论 沙发

评论沙发