vue基础

最新推荐文章于 2020-06-23 10:49:14 发布

冰怜

最新推荐文章于 2020-06-23 10:49:14 发布

阅读量86

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/xiaoxin0630/article/details/88014865

版权

常用指令

v-model

实现双向数据绑定：

a.由模型数据绑定Dom对象，模型数据的值改变，Dom对象的值自动改变

b.由Dom对象绑定到模型数据，Dom对象改变，模型数据就改变

 <input type="text" v-model="num1"/> 
 <input type="text" v-model="num2"/>


data:{//model数据
            name:'binglian',
            num1:0,
            num2:0,
            result:0,
            url:'http://www.itcast.cn',
            size:11
        },

v-text

v-text可以将一个变量的值渲染到指定的元素中，它可以解决插值表达式闪烁的问题

<span v-text="result"></span>

v-on

监听用户事件、点击等

<button v-on:click="change">计算</button>

v-bind

v-bind可以将数据对象绑定到dom的任意属性中

v-bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class

    <div v-bind:style="{ fontSize: size + 'px' }">binglian</div>

总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">binglian</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            name:'binglian',
            num1:0,
            num2:0,
            result:0,
            url:'http://www.itcast.cn',
            size:11
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
                //alert("计算结果："+this.result)
            }
        }
    });
</script>
</html>

v-for v-if v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<!--相当于MVVM的view视图-->
		<ul>
			<li v-for="(item,index) in list" :key="index" v-if="index %2==0">
					{{index}}--{{item}}
			<li>
			<li v-for="(value,key) in user" >{{key}}--{{value}}</li>
			<li v-for="(item,index) in userlist" :key="item.user.uname">
				<div v-if="item.user.uname == 'itheima'" style="background: #00f50c;">
				</div>
				<div v-else="">
					{{index}}--{{item.user.uname}}--{{item.user.age}}
				</div>	
			</li>
		</ul>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		//编写MVVM中的model部分及VM（ViewModel）部分
		var VM = new Vue({
			el:'#app',//vm接管了app区域的管理
			data:{//model数据
				list:[1,2,3,4,5],
				user:{uname:'itcast',age:10},
				userlist:[
					{user:{uname:'itcast',age:10}},
					{user:{uname:'itheima',age:11}}
				]
			}
		});
	</script>
</html>

冰怜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

常用指令v-model实现双向数据绑定：a.由模型数据绑定Dom对象，模型数据的值改变，Dom对象的值自动改变b.由Dom对象绑定到模型数据，Dom对象改变，模型数据就改变 &lt;input type="text" v-model="num1"/&gt; &lt;input type="text" v-model="num2"/&gt;data:{//...
复制链接

扫一扫