扎克伯格boss
获得徽章 0
<!-- 错误的<p>{{ total() }}</p>/ 正确的 <p>total: {{ total }}</p> -->
//计算数属性
作用：当一个变量的值 依赖 另外一些数据 计算 而得到
* 语法:
* computed: {
* 计算属性的名字(){
* ...
* return 值
* }
* }
* computed: {
// 总人数的计算属性 - total
total(){
console.log('computed')
return this.boy + this.girl
}
}
<p>sum: {{ sum() }}</p>//methods方法
methods: {
sum(){
console.log('methods')
return this.boy + this.girl
}
}
* 当计算属性依赖的 数据发生变化，计算属性会重新计算
*
* 注意事项：
* 1. 计算属性不能和data数据变量重名
* 2. 计算属性的用法与data数据变量用法一致（配合 插值 或者 指令使用）
* 3. 计算属性必须return一个结果
* 4. 计算属性声明的时候是函数，调用的是属性（不能加括号）
*
*
* 计算属性的优势：
* 1. 带缓存
* 2. 计算属性会根据 依赖 进行缓存，多次调用同一个计算属性，会从缓存取结果
* 3. 当依赖发生变化，计算属性会重新计算结果，并缓存最新的结果
*/
//计算数属性
作用：当一个变量的值 依赖 另外一些数据 计算 而得到
* 语法:
* computed: {
* 计算属性的名字(){
* ...
* return 值
* }
* }
* computed: {
// 总人数的计算属性 - total
total(){
console.log('computed')
return this.boy + this.girl
}
}
<p>sum: {{ sum() }}</p>//methods方法
methods: {
sum(){
console.log('methods')
return this.boy + this.girl
}
}
* 当计算属性依赖的 数据发生变化，计算属性会重新计算
*
* 注意事项：
* 1. 计算属性不能和data数据变量重名
* 2. 计算属性的用法与data数据变量用法一致（配合 插值 或者 指令使用）
* 3. 计算属性必须return一个结果
* 4. 计算属性声明的时候是函数，调用的是属性（不能加括号）
*
*
* 计算属性的优势：
* 1. 带缓存
* 2. 计算属性会根据 依赖 进行缓存，多次调用同一个计算属性，会从缓存取结果
* 3. 当依赖发生变化，计算属性会重新计算结果，并缓存最新的结果
*/
展开
评论
点赞
<template>
<div>
<!-- 1. 直接绑定 -->
<p :class="activeClass"></p>
<!-- 2. 三元绑定 -->
<p :class="isActive ? 'active' : ''"></p>
<!-- 3. 对象绑定 -->
<p :class="{active: isActive}"></p>
<!-- 4. 静态的class与动态class可以共存，二者最终会合并到一起 -->
<p class="item" :class="activeClass"></p>
<!-- style的绑定 -->
<p :style="{color:colorStr}">杜兰特YYDS</p>
<p :style="styleObj">杜兰特YYDS</p>
</div>
</template>
<script>
/**
* 目标：class的动态绑定
目标：style的动态绑定
语法：
:style="vue数据变量对象"
:style="{css属性名：vue的数据变量}"
*/
export default {
data(){
return {
activeClass: 'active',
isActive: true,
colorStr: 'red',
styleObj: {
color: 'red'
}
}
}
}
</script>
<style>
</style>
<div>
<!-- 1. 直接绑定 -->
<p :class="activeClass"></p>
<!-- 2. 三元绑定 -->
<p :class="isActive ? 'active' : ''"></p>
<!-- 3. 对象绑定 -->
<p :class="{active: isActive}"></p>
<!-- 4. 静态的class与动态class可以共存，二者最终会合并到一起 -->
<p class="item" :class="activeClass"></p>
<!-- style的绑定 -->
<p :style="{color:colorStr}">杜兰特YYDS</p>
<p :style="styleObj">杜兰特YYDS</p>
</div>
</template>
<script>
/**
* 目标：class的动态绑定
目标：style的动态绑定
语法：
:style="vue数据变量对象"
:style="{css属性名：vue的数据变量}"
*/
export default {
data(){
return {
activeClass: 'active',
isActive: true,
colorStr: 'red',
styleObj: {
color: 'red'
}
}
}
}
</script>
<style>
</style>
展开
评论
点赞
<template>
<div>
<h3>请选择你喜欢的专栏</h3>
<div>
<!-- 1. loves是个数组，复选框绑定的是value属性 -->
<span
v-for="(item, index) in arr"
:key="index">
<input
type="checkbox"
:value="item"
v-model="loves">
{{ item }}
</span>
</div>
<!-- 2. 根据选中的，循环生成列表结构 -->
<ul>
<li
v-for="(item, index) in loves"
:key="index"
v-text="item">
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
// 专栏的数组
arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
// 选中的专栏数组
loves: []
}
}
}
</script>
<style>
</style>
展开
评论
点赞
行内例如：<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>
块级<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
块级<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
评论
点赞