v-
前缀的特殊属性<h1 v-text="msg"></h1>
<h1 v-html="msg"></h1>
v-bind:title="msg"
:title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
// el 用来指定vue挂载到页面中的元素,值是:选择器
// 理解:用来指定vue管理的HTML区域
el: '#app',
// 数据对象,用来给视图中提供数据的
data: {
url: 'http://www.baidu.com'
}
})
</script>
v-on:click="say"
or v-on:click="say('参数', $event)"
@click="say"
methods
中获取<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething(“123”)"></a>
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
el: '#app',
// methods属性用来给vue实例提供方法(事件)
methods: {
doSomething: function(str) {
//接受参数,并输出
console.log(str);
}
}
})
</script>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind
处理它们:只需要通过表达式计算出字符串结果即可。
// 公共样式定义
<style>
.red{
color: red;
}
.font35{
font-size: 35px;
}
.bgblue{
background-color: blue;
}
</style>
<div id="app">
<!-- v-bind:class用法 -->
<!-- 1、class对象语法 -->
<h2 v-bind:class="{ red:isActive, bgnlue:false}">你好么,世界!!</h2>
<hr>
<!-- 2、数组语法 -->
<h2 v-bind:class="[classRed, classBgblue]">你好</h2>
<hr>
<!-- v-bind:style用法 -->
<!-- 1、对象语法 -->
<p v-bind:style = "PClass">hello world</p>
<!-- 2、数组语法 -->
<p v-bind:style="[csRed, csBgblue]">hello world</p>
</div>
<script src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
// v-bind:class 数据绑定
// 1、class对象语法
isActive : true,
isHidden : false,
// 2、数组语法
classRed : 'red',
classBgblue : 'bgblue',
// v-bind:style 数据绑定
// 1、对象语法
PClass : {
color : 'red',
font35 : true,
},
// 2、数组语法
csRed: {
color: 'red',
},
csBgblue: {
bgblue: true,
},
},
methods: {
},
});
</script>
<!-- 1、迭代数组 -->
<ul v-for="item in items">
<li>{{ item.message }}</li>
</ul>
<!-- 2、迭代数组中的属性 -->
<ul v-for="(item, i) in items" key="item">
<li>{{ item.message }}-----{{i}}</li>
</ul>
<!-- 3、迭代数字 -->
<ul v-for="i in 10">
<li>这是第{{i}}个标签</li>
</ul>
var vm = new Vue({
el: '#app',
data: {
items: [
{ message: 'a1111111' },
{ message: 'b2222222' },
{ message: 'c3333333' },
]
},
});
v-if
:根据表达式的值的真假条件,销毁或重建元素v-show
:根据表达式之真假值,切换元素的 display CSS 属性本文链接:https://cloud.tencent.com/developer/article/1558564
本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接