w3h5

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,数据直接不加载:

0003.png Vue.js学习笔记——条件、循环、双向绑定 经验总结

* 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>

效果如下:

{{message}}

* 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>

效果如下:

{{ message }}

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

赞 (0)
分享到: +More |

评论 沙发

换个身份