thinkphp5控制器向+vue的data里传值
传一维数组传值
$array=['id'=>40,"cat_name"=>"明星产品"];
$MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE);
$this->assign([
'MenuCats_info'=>$MenuCats_info,
]);
return view('index');
html里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="__STATIC__/vue/vue.js"></script>
<script type="text/javascript" src="__STATIC__/vue/node_modules/axios/dist/axios.js"></script>
<style type="text/css">
.success{
color:green;
}
.error{
color:red;
}
</style>
</head>
<body>
<div id="vue">
<li v-for="v in news">
<span :class="v.status?'success':'error'">{{v.title}}</span>
<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
{{MenuCats_info.cat_name}}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
news:[
{title:'haha',status:true},
{title:"hehe",status:true}
],
//接收值 |raw 不转义输出
MenuCats_info:JSON.parse('{$MenuCats_info|raw}'),
}
});
</script>
</html>
效果:打印
明星产品
传二维数组:
php里:
$array=array(
['id'=>35,"cat_name"=>"吐司面包"],
['id'=>40,"cat_name"=>"明星产品"]
);
$MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE);
$this->assign([
'MenuCats_info'=>$MenuCats_info,
]);
return view('index');
html里:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="__STATIC__/vue/vue.js"></script>
<script type="text/javascript" src="__STATIC__/vue/node_modules/axios/dist/axios.js"></script>
<style type="text/css">
.success{
color:green;
}
.error{
color:red;
}
</style>
</head>
<body>
<div id="vue">
<li v-for="v in news">
<span :class="v.status?'success':'error'">{{v.title}}</span>
<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
<div v-for="vv in MenuCats_info">
{{vv.cat_name}}
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
news:[
{title:'haha',status:true},
{title:"hehe",status:true}
],
//接收值 |raw 不转义输出
MenuCats_info:JSON.parse('{$MenuCats_info|raw}'),
}
});
</script>
</html>
thinkphp5控制器向+vue的data里传值的更多相关文章
- vue重置data里的值
this.$options.data() 这个可以获取原始的data值,this.$data 获取当前状态下的data,拷贝重新赋值一下就行了. Object.assign(this.$data, t ...
- VUE：data数据中，能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- Vue实例data对象里允许有哪些类型数据
做项目中遇到了data赋值的问题,总结了下常用的data赋值的数据类型.之前一直不确定是否能在data里写函数,实践证明data里也是可以对函数赋值的. export default { name: ...
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- Vue之组件间传值
标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
随机推荐
- springboot2.x如何添加事务
什么时候需要添加事务呢?一般情况下,如果该方法有两条SQL语句或者以上都需要添加(个人感觉:)). 首先需要在我们的启动类加上 @EnableTransactionManagement //开启事务管 ...
- 如何在eclipse查看jdk源码(src.zip)
在eclipse编写代码的过程中,有时候想点进去看看jdk的源码,了解下里面具体的实现.在没有任何配置的情况下,应该是看不到源码的. 其实只需要把jdk安装目录下的src.zip压缩包添加到eclip ...
- Android 给EditText添加下划线
在安卓高版本,默认是有下划线的,其默认下划线的颜色是由其主题颜色来控制的! 控制如下: <style name="AppTheme" parent="Theme.A ...
- Vue.js-创建Vue项目（Vue项目初始化）并不是用Webstrom创建，只是用Webstrom打开
我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...
- 验证tensorflow版本是GPU还是CPU
reference: https://blog.csdn.net/zlase/article/details/79261348 import numpy import tensorflow as tf ...
- April 30 2017 Week 18 Sunday
Our lives stretched out ahead of us, like a perpetual sunrise. 生命如永恒的日出,生生不息. Please respect yoursel ...
- 153. Find Minimum in Rotated Sorted Array(leetcode, binary search)
https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/description/ leetcode 的题目,binary ...
- 基于LBS的多人聊天
- 7 MSSQL数据库备份与恢复
0 MSSQL数据库备份 1 SQLAgent配置 2 设置连接属性 3 输入SA账号密码 4 SQL备份脚本配置 5 生成SQL全量备份脚本 6 生成SQL差异备份脚本 7 修改SQL差异备份脚本 ...
- 居中未知元素（翻译https://css-tricks.com/centering-in-the-unknown/）
在web开发中,当你遇到居中元素时,知道越多关于元素本身和父级元素的信息,居中做起来就很轻松.但是,当遇到你一点都不知道的元素该怎么办? It's still kinda doable. 不会很难:已 ...