实现双向绑定v-model
注：双向绑定只能用在表单控件上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- v:bind:只能实现数据的单向绑定 -->
<input type="text" v-bind:value="msg">
<!-- v:model:可以实现表单元素和Model中数据的双向绑定 -->
<!-- 只能运用在表单元素中 -->
<input type="text" v-model="msg">
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el : '#app',
data : {
msg : '大家一起玩vue'
},
methods:{
}
})
</script>
</body>
</html>
点击事件绑定（单向）
<body>
<div id="app">
<input type="checkbox" :checked="flag">
<button @click="toggle">切换</button>
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el : '#app',
data : {
flag:true
},
methods:{
toggle(){
this.flag=!this.flag;
}
}
})
</script>
</body>
简易计算器
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="sign">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el: '#app',
data: {
sign: '+',
n1: 0,
n2: 0,
result: 0
},
methods: {
calc() {
switch (this.sign) {
case '+':
this.result = parseFloat(this.n1) + parseFloat(this.n2);
break;
case '-':
this.result = parseFloat(this.n1) - parseFloat(this.n2);
break;
case '*':
this.result = parseFloat(this.n1) * parseFloat(this.n2);
break;
case '/':
this.result = parseFloat(this.n1) / parseFloat(this.n2);
break;
}
}
// 注意:eval貌似能够简化我们的代码,但在实际开发中尽量减少使用,不方便调试,同时
// 降低了代码的可读性
}
})
</script>
</body>
通过class绑定赋予样式
<style>
.red{
color: red;
}
.active{
font-size: 20px;
}
.weight{
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种方式：直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定 -->
<p :class="['red','active','weight']">p标签，样例文本</p>
<!-- 在数组中使用三元运算符,提高代码可读性 -->
<!-- 类名red，active的单引号可以省略，flag是data中的数据 -->
<p :class="[{'red':flag,'active':flag}]">p标签，样例文本</p>
<p :class="[{'red':true,'active':true}]">p标签，样例文本</p>
<!-- 另一种方式 （绑定一个对象）-->
<p :class="stylesobj">p标签，样例文本</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
flag : true,
stylesobj : {'red':true,'active':true}
},
methods: {}
})
</script>
</body>
使用内联样式块
<style>
.red{
color: red;
}
.active{
font-size: 20px;
}
.weight{
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种方式：直接绑定，注意：font-weight中有'-'号，必须加单引号 -->
<h1 :style="{color:'red','font-weight':'100'}">这是一个h1标签</h1>
<!-- 第二种方式：直接绑定 -->
<h1 :style="styleObj1">这是一个h1标签</h1>
<!-- 第三种方式：使用数组 -->
<h1 :style="[styleObj1,styleObj2]">这是一个h1标签</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
styleObj1 : {color:'red','font-weight':200},
styleObj2 : {'font-size':'50px'}
},
methods: {}
})
</script>
</body>
v-for循环
<body>
<div id="app">
<!-- 你这么做会让人笑掉大牙 -->
<!-- <p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>
<p>{{list[5]}}</p> -->
<!-- 想使用索引值时,使用括号，里面的i即是索引,item是对象属性值，i是对象属性名 -->
<p v-for="(item,i) in list">{{i}}--{{item}}</p>
<ul>
<li v-for="(item,i) in list" v-html="item+','+i" >
</li>
</ul>
<!-- 遍历对象数组 -->
<p v-for="(user,i) in listObj">{{i}}--{{user.id}}--{{user.name}}</p>
<!-- 遍历对象,注意：括号中第一个参数是value值，第二个是key值 -->
<!-- 此处的i也是索引，但用处不大 -->
<p v-for="(val,key,i) in user">{{val}}--{{key}}--{{i}}</p>
<!-- 放数字，代表循环次数,count默认从1开始 -->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
list:['a','b','c','d','e','f'],
listObj:[
{id:101,name:'张三'},
{id:102,name:'李四'},
{id:103,name:'王五'},
{id:104,name:'赵六'}
],
user:{
id : 1001,
name : '大力',
gender:'男'
}
},
methods: {}
})
</script>
</body>
v-for中的使用问题
key值不绑定会发生选中错乱问题
<body>
<div id="app">
<div>
<label>
<!-- 双向绑定id -->
Id : <input type="text" v-model="id">
</label>
<label>
<!-- 双向绑定name -->
Name : <input type="text" v-model="name">
</label>
<!-- 绑定触发函数add -->
<button type="button" @click="add">添加</button>
</div>
<p v-for="item in list">
<input type="checkbox" name="namelist">
{{item.id}} ---- {{item.name}}
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id : '',
name : '',
list : [
{id:1,name:'关羽'},
{id:2,name:'吕布'},
{id:3,name:'张飞'},
{id:4,name:'刘备'},
{id:5,name:'曹操'}
]
},
methods: {
/*
向list中添加对象,即文本输入框中的id和name,
这里如果使用unshift从起始位置存入list就会在
选中某一个选项并添加新的节点时，出现bug
*/
add(){
// this.list.push({id:this.id,name:this.name})
this.list.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
解决方法
<!-- 注意：v-for循环的时候，key属性只能使用number或String -->
<!-- 注意：key在使用的时候，必须使用v-bind绑定 -->
<!-- 在一些特殊情况下，如在组件中，如果v-for时有问题，必须指定唯一的字符串/数字 :key值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox" name="namelist">
{{item.id}} ---- {{item.name}}
</p>
v-if和v-show
v-if控制的是整个标签是否出现，用于不经常改变切换的
v-show控制的是标签的style是否显示，用于经常切换显示和消失
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="toggle">切换</button>
<!-- v-if特点：每次都会重新删除或创建元素，如果需要频繁的切换，不推荐使用 -->
<!-- v-show特点：每次不会重新进行DOM的删除和创建，只是切换了display样式 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<h3 v-if="flag">这是v-if控制元素</h3>
<h3 v-show="flag">这是v-show控制元素</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
flag :true
},
methods: {
toggle(){
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
v-if补充
v-if还有v-else-if及v-else
