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>效果如下：
{{message}}
var myApp = new Vue({ el: '#myApp', data: { message: 'Hello w3h5!'//1.定义一个数据变量 } })
* 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 }}
逆转消息
var myApp1 = new Vue({ el: '#myApp-1', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。
(adsbygoogle = window.adsbygoogle || []).push({});