数据的双向绑定：v-model
<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>
通过绑定class赋予样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
<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="styles">p标签，样例文本</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
flag : true,
styles : {'red':true,'active':true}
},
methods: {}
})
</script>
</body>
</html>
使用内联样式
<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
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 想使用索引值时,使用括号，里面的i即是索引 -->
<p v-for="(item,i) in list">{{i}}--{{item}}</p>
<!-- 遍历对象数组 -->
<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>
</html>
v-for中的使用问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<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>
</html>
解决方式
<!-- 注意：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
<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>
网友评论