前端框架Vue学习 ——（二）Vue常用指令

---

常用指令

指令: HTML 标签上带有 “v-” 前缀的特殊属性，不同指令具有不同含义。例如: v-if, v-for…

常用指令：

• v-bind：为 HTML 标签绑定属性值，如设置 href，css 样式等

a v-bind:href="url">测试a>

可以简写为：

a :href="url">测试a>

• v-model：在表单元素上创建双向数据绑定

input type="text" v-model="url">

为其绑定数据模型

script>
new Vue({
	el: "#app" ,
	data: {
		url: "https://www.baidu.com"
	}	
})
script>

注意：通过 v-bind 或者 v-model 绑定的变量，必须在数据模型中声明。

代码

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>VUE-快速入门title>
    script src="js/vue.js">script>
head>
body>
    div id="app">
        div>
            input type="text" v-model="message">
            {{message}}
        div>
        div>
            a :href="url">链接a>
            input type="text" v-model="url" />
        div>
    div>
body>
script>
    // 定义 Vue 对象
    new Vue({
        el: "#app", // Vue 接管区域
        data: {
            message: "Hello VUE",
            url: "https://www.baidu.com"
        }
    })
script>
html>

• v-on：为 HTML 标签绑定事件（v-click、v-blur、v-focus）

服务器托管网

input type= "button" value="点我" v-on:click="handle()">

可以简化为：

input type="button" value= "点我" @click= "handle()">

script>
new Vue({
	el: " #app",
	data: {
		//...
	},
	methods: {
		handle: function(){
			alert('我被点去了');
		}
	}
})
script>

• v-if：添加性的渲染某元素，判断为 true 时渲染，否则不渲染

年龄{{age}},经判定为:
span v-if="age ">年轻人span>
span v-else-if="age > 35 && age服务器托管网 ">中年人span>
span v-else>老年人span>

• v-show：根据条件展示某元素，区别在于切换的是 display 属性 的值

年龄{{age}},经判定为:
span v-show="age ">年轻人span>

• v-for：列表渲染，遍历容器的元素或者对象的属性

div v-for="addr in addrs">{{addr}}div>

div v-for=" (addr,index) in addrs">{{index + 1}} : {{addr}}div>

data: {
	addrs: ['北京','上海','广州'， '深圳', '成都','杭州']
},

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 【一文清晰】单元测试到底是什么？应该怎么做？

我是java程序员出身，后来因为工作原因转到到了测试开发岗位。测试开发工作很多年后，现在是一名自由职业者 1、什么是单元测试 2、该怎么做单元测试 一、什么是单元测试？ 单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。至于“单…