条件与循环
if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-if="seen=='a'">a</p>
<p v-else-if="seen=='b'">b</p>
<p v-else="seen=='c'">c</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
seen: 'a'
}
})
</script>
</html>
for语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-for="todo in todos">
{{ todo.text }}
</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
</script>
</html>
绑定事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="chien">Chien</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello vue"
},
methods:{//方法必须定义在vue的methods对象中,v-on:事件
chien:function () {
alert(this.message)
}
}
})
</script>
</html>
双向绑定
当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化,这也算是vue.js的精髓之处。
我们可以使用使用v-model指令在 < input >、< textarea >、< select >元素上创建双向数据绑定。
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入的文本:<input type="text" v-model="message">{{message}}
<br>
<input type="radio" name="sex" value="男" v-model="chien">男
<input type="radio" name="sex" value="女" v-model="chien">女
<p>
性别为:{{chien}}
</p>
下拉框:
<select v-model="selected">
<option disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>value:{{selected}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"",
chien:'',
selected:''
},
})
</script>
</html>