* 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>
效果如下:
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({});