|
|
前端框架技术
学校: 无
问题 1: 1. <template>
________________
template>
<script>
import { ref } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const message = ref('Hello World!')
return {
message
}
}
}
script>
请在上面空处补充代码，将 数据message 的值（Hello World!）渲染到此处
选项:
答案: {{message}}
问题 2: 1. 请在红色下划线填空处完成双向绑定代码（将用户的输入和brand的值绑定到一起）：
<template>
<p>请输入你最喜欢的民族品牌:<input type=text __________________ />p>
<h3>你输入的民族品牌是:{{ brand }}h3>
template>
<script>
import { ref } from 'vue'
export default {
name: 'v-model-test',
setup() {
const brand = ref('')
return {
brand
}
}
}
script>
选项:
答案: v-mode=brand
问题 3: 2. 请在红色下划线填空处运用计算属性computed实现总金额（本金+利息）的计算。
<template>
<p><span>输入存款金额:span><input type=text v-model=amount />p>
<p><span>输入当前总利息:span><input type=text v-model=interestPayment />p>
<hr />
<p><span>当前本息和:span>{{ totalMoney }}p>
template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'ComputedTest',
data() {
const amount = ref(10000)
const interestPayment = ref(200)
const totalMoney = ______________________________________________;
return {
amount,
interestPayment,
totalMoney
}
}
}
script>
选项:
答案: computed(function(){return amount.value+interestPayment.value})
问题 4: 1. 请在下划线填空处补充代码完成对amount数据的变化监听，监听到变化后执行：alert('您的存款金额变化了')
<template>
<h2>状态监听应用h2>
<p>请输入存款金额:<input type=text v-model=amount />p>
<p>你输入的存款金额为:{{ amount }}p>
template>
<script>
import { ref, watch } from 'vue'
export default {
name: 'ComputedTest',
data() {
const amount = ref(0)
watch(________________________________________)
return {
amount
}
}
}
script>
选项:
答案: amount,function(){
alert(您的存款金额变化了)
}
问题 5: 2. 请在下划线填空处补充代码用条件渲染指令v-if v-else实现登录注册组件切换渲染
<template>
<div class=tabs>
<span :class=['tab-item', currentView == 'Login' && 'active'] @click=toggleView('Login')>登录span>
<span :class=['tab-item', currentView == 'Register' && 'active'] @click=toggleView('Register')>注册span>
div>
<div class= tab-content>
________________________________________________
div>
template>
<script>
import { ref } from 'vue'
import Login from './Login.vue'
import Register from './Register.vue'
export default {
name: '',
components: {
Login,
Register
},
setup() {
const currentView = ref('Login')
const toggleView = function (viewName) {
currentView.value = viewName
}
return {
currentView,
toggleView
}
}
}
script>
选项:
答案: 无信息
问题 6: 3. 请在红色下划线填空处补充代码实现图片列表数据imgs中的图片渲染
<template>
<div>
<div v-for=(item, index) in __________ :key=_________>
<p>
<img :src=__________ />
p>
<p>___________p>
div>
div>
template>
<script>
import { reactive, ref, toRefs } from 'vue'
import imgOne from '../assets/one.png'
import imgTwo from '../assets/two.png'
import imgThree from '../assets/three.png'
export default {
name: 'TestVFor',
setup() {
const imgs = ref([imgOne, imgTwo, imgThree])
return {
imgs
}
}
}
script>
选项:
答案: imgs
问题 7: 1. 请在下划线填空处补充代码用动态组件component实现登录注册组件切换渲染
<template>
<div class=tabs>
<span :class=['tab-item', currentView == 'Login' && 'active'] @click=toggleView('Login')>登录span>
<span :class=['tab-item', currentView == 'Register' && 'active'] @click=toggleView('Register')>注册span>
div>
<div class= tab-content>
________________________________________________
div>
template>
<script>
import { ref } from 'vue'
import Login from './Login.vue'
import Register from './Register.vue'
export default {
name: '',
components: {
Login,
Register
},
setup() {
const currentView = ref('Login')
const toggleView = function (viewName) {
currentView.value = viewName
}
return {
currentView,
toggleView
}
}
}
script>
选项:
答案: 请关注ybaotk.com搜题查看答案 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
上一篇：中国大学mooc农产品营销辅导资料下一篇：中国大学mooc人体解剖与组织胚胎辅导资料
|
发表于 2025-3-22 10:34:44
中发现Ni：
中发现Ni：
中发现Ni：
中发现Ni：
中发现Ni：
中发现Ni：
QQ登录
